CSS水平环绕列布局

Question

我正在尝试实现输入字段出现在列中的布局。当列超过其容器的高度时，它必须水平包裹。

我有achieved this layout using flexbox，但有flexbox（更具体地说是flex-wrap属性）isn't widely enough supported。就我而言，我需要支持现代网络浏览器，至少支持IE9 +

此外，表单内容由Ember.js沿this method行生成。绑定到表单的模型会更改，这意味着输入字段的数量是动态的。

如何更兼容地实现此布局？

Answer 1

稍微更新了你的小提琴：http://jsfiddle.net/43k5s/6/

.menu-form {
    background-color: lightgray;
    padding: 1em 1.5em;
}

.menu-form:before, .menu-form:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
}

.menu-form:after {
    clear: both;
}

.menu-form {
    zoom: 1;
}

.menu-form div {
    width: 33%;
    float: left;
}

.menu-form div label {
    display: block;
}

使用浮动和clearfix这应该适用于所有主流浏览器（甚至更老的IE）。您还可以使用固定宽度或媒体查询来更改列数。