定位列右側的幾個元素

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屬性來修改表格結構。