如何制作2列堆叠浮动div

Question

我希望将div分成2列，例如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具有相等的宽度，浮动时应该转到较短的列。

是否有可靠的纯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;
}