3

随着容器高度的变化，是否可以将动态/未知数量的复选框水平重排到列中？这是我的意思的简单图表：

高度 = 180 像素（20 像素 * 9 复选框）：

[ ] Checkbox 1
[ ] Checkbox 2
[ ] Checkbox 3
[ ] Checkbox 4
[ ] Checkbox 5
[ ] Checkbox 6
[ ] Checkbox 7
[ ] Checkbox 8
[ ] Checkbox 9

高度 = 140 像素（20 像素 * 7 复选框）：

[ ] Checkbox 1    [ ] Checkbox 8
[ ] Checkbox 2    [ ] Checkbox 9
[ ] Checkbox 3
[ ] Checkbox 4
[ ] Checkbox 5
[ ] Checkbox 6
[ ] Checkbox 7

高度 = 100 像素（20 像素 * 5 个复选框）：

[ ] Checkbox 1    [ ] Checkbox 6
[ ] Checkbox 2    [ ] Checkbox 7
[ ] Checkbox 3    [ ] Checkbox 8
[ ] Checkbox 4    [ ] Checkbox 9
[ ] Checkbox 5

随着容器元素的高度缩小，复选框元素将水平溢出到新列中。

注意： 我很清楚我可以通过编程方式创建自己的列，我只是想看看这是否可以通过纯 HTML/CSS 实现。

4

2 回答 2

8

您有 2 个选项可供您使用。

http://codepen.io/cimmanon/pen/GvmIs

多列模块

在这两个选项中，这个具有最广泛的浏览器支持。您必须提前定义列的宽度。

ul {
  height: 25%;
  columns: 10em;
  column-fill: auto;
}

http://caniuse.com/#feat=multicolumn

弹性盒

Flexbox 支持相当差，因为它最近才 CR，支持 wrapping 的浏览器子集非常少（目前只有 Opera、Chrome 和 IE10+ 支持它）。您只需要指定容器的高度，剩下的就交给您了。

ul {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  height: 25%;
}
@supports (flex-wrap: wrap) {
  ul {
    display: flex;
  }
}

http://caniuse.com/#feat=flexbox（IE10是唯一被列为部分支持并支持换行的浏览器）

于 2013-10-21T14:44:44.367 回答
0

你可以试试这样的css。例如，在这里，您的 div 宽度将有六列。

.columns {
    -moz-column-count: 6;
    -webkit-column-count: 6;
    column-count: 6;
}

将 columns 类设置为您的包装元素。

<div class="columns">
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    ...
</div>
于 2013-10-21T14:16:37.473 回答