Css 如何制作2列堆叠浮动div

我希望在2列中堆叠div，但我只想使用纯CSS。我现在有

规则是div的宽度相等，并且浮动时应转到较短的列

有可靠的纯CSS解决方案吗？或者我必须求助于JavaScript吗？

你可以试试这个

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

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