多列模块

Question

当容器的高度发生变化时，是否可以将动态/未知数量的复选框水平回流到列中？这是我的意思的简单图表：

高度= 180px（20px * 9个复选框）：

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

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

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

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

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

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

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

Answer 1

您有两种选择。

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

多列模块

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

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

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

Flexbox的

Flexbox支持相当差，因为它刚刚进入CR，支持包装的浏览器子集非常低（目前只有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是唯一列为支持包装的部分支持的浏览器）

Answer 2

你可以尝试像这样的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>

CSS - 可以重排列中的复选框吗？

2 个答案:

多列模块

Flexbox的