将多个元素放在列的右侧答案

【问题标题】：Position several elements at right of a column将多个元素放在列的右侧
【发布时间】：2012-05-23 05:11:23
【问题描述】：

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

即，看起来像这样：

|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中需要倒序放置。

有没有更好的方法？

【问题讨论】：

标签： css css-float html-table

【解决方案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。

【讨论】：

感谢您指出我原来的 display:inline-block 是多余的。我已经把它从我的身上取下来了，发现它没有任何区别。

【解决方案2】：

将第一项放在表格的单独单元格中，将其他三项放在另一个单元格中。右对齐第二个单元格。

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

【讨论】：

谢谢。是的，该表有更多行，这是一个 colspan。将其保留为一列，并使用 CSS 移动元素更方便。