定位列右侧的几个元素

Question

我想在列的左侧放置一个元素，并在右侧放置三个元素。

即，看起来像这样：

|item1     item2 item3 item4| 

（在原来的问题，列在几个栏目的顶部跨度）

这工作：

table { 
    width:10cm; 
} 
.push-left{ 
    display:inline-block; 
    float:left; 
} 
.push-right{ 
    display:inline-block; 
    float:right; 
    padding:0 5px 0 5px; 
} 

<table> 
<tr> 
<td> 
<div class="push-left">item1</div> 
<div class="push-right">item4</div> 
<div class="push-right">item3</div> 
<div class="push-right">item2</div> 
</td> 
</tr> 
</table> 

请注意，float：right项目需要在html中以相反顺序放置。

有没有更好的办法？

Answer 1

将item2 - item3 - item4放入包装中，然后浮动包装。

.inline{ 
    display:inline-block; 
    padding:0 5px 0 5px; 
} 
.push-right{ 
    float:right; 
} 


<div class="push-right"> 
    <div class="inline">item2</div> 
    <div class="inline">item3</div> 
    <div class="inline">item4</div> 
</div> 

，每当你做出一个元素浮动，它将包裹起来，以它的内容，没有display: inline-block需要。

Answer 2

将第一个项目放在表格的另一个单元格中，将另外三个项目放到另一个单元格中。右对齐第二个单元格。

如果实际表中的行数多于代码中显示的行数，则可能需要通过添加新的单元格和/或colspan属性来修改表格结构。