css - 如何制作2列堆叠 float div

Question

我希望在 2 列中堆叠 div，例如 facebook timeline但我只想使用纯 CSS 来完成它。我目前有 this but the margin is not correct on Content Four .

#container { width: 700px; background-color: green; }
.box {
    display: inline-block;
    width: 300px;
    background-color: #cecece;
    margin: 5px;
    padding: 10px;
}
.odd { float: left; }
.even { float: right; }

规则是 div 将具有相等的宽度，并且在 float 时应该转到较短的列。

是否有可靠纯 CSS 解决方案，还是我必须求助于 JavaScript？

Answer 1

你可以试试这个

#container { width:700px; background-color: green; display:table; }
.box {
    display:table-cell;
    width: 300px;
    background-color: #cecece;
    margin: 5px;
    padding: 10px;
}