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

将多个元素放在列的右侧

2 个答案: