并排对齐2个div

Question

我需要并排排列2个div。它们都在没有设定高度的包装div内。

我的问题是当我分别使用float：left和float：right时，div似乎并没有“留在”包装器div中（我可以告诉它，因为包装div与页面的背景颜色不同而且这个没有被扩展到涵盖我想要定位的2个div。

基本上我需要2个div并排，但是在这个包装器中。

为[非常差]尝试描述这个问题道歉，我没有做太多的设计工作。

Answer 1

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

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年代开始让这张桌子回归的漂亮方式