html - CSS 水平环绕列布局

Question

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

我已经使用 flexbox 实现了这种布局，但是 flexbox（更具体地说是flex-wrap属性）没有得到足够广泛的支持。就我而言，我需要支持现代网络浏览器和至少 IE9+

此外，表单内容是由 Ember.js 沿此方法生成的。绑定到表单的模型会发生变化，这意味着输入字段的数量是动态的。

我怎样才能更兼容地实现这种布局？

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）。您还可以使用固定宽度或媒体查询来更改列数。