将两个div并排对齐

Question

我需要将两个div并排对齐。它们都在一个没有设置高度的包装div内。

我的问题是，当我分别使用float:left和float:right时，div似乎不会“留在”包装div内（我可以发现，因为包装div的背景颜色与页面不同，并且没有被扩展到覆盖我要定位的两个div）。

基本上，我需要这两个div并排放置，但是在此包装器内。

对于这个问题的[非常差的]描述，我很抱歉，因为我不太做设计工作。

- AndrewC

Answer 1

将overflow:hidden添加到包装器div中。

- Mr. TA

---

你的问题通常被描述为“清除浮动”。虽然现在清除不是首选解决方案。添加height:auto也不会有害，我通常会添加height:auto和overflow:hidden。 - Rich Bradshaw

Answer 2

CSS

.table 
{
border: 2px solid #000;
display: table;
}
.row
{
display: table-row;
}
.cell{
display: table-cell;
border: 2px solid #ccc;
}
.leftcell{width: 200px;}
.rightcell{width: 100px; }

HTML

<div class="table">
<div class="row">
<div class="cell leftcell">left cell</div>
<div class="cell rightcell">right cell<br/>multiline</div>
</div>
</div>

这是一种漂亮的方式，让我们回到90年代那种对于表格的感觉。

- Tom Hofman