css - 将多个元素放在列的右侧

Question

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

即，看起来像这样：

|item1                   item2 item3 item4|

（在原来的问题中，column 是几列顶部的一个 span）

这有效：

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属性来修改表格结构。