Html CSS-是否可以在列中回流复选框？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

您可以尝试类似于CSS的方法。例如，在这里，div的宽度有六列

.columns{
-moz列数：6；
-webkit列数：6；
列数：6；
}

将columns类设置为包装元素

...

您有两种选择

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

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

柔性箱 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;
  }
}

---

（IE10是唯一列出的支持包装的部分支持浏览器）

可能与@cimmanon重复：这是另一个问题。这个问题回答了如何在给定静态宽度的情况下创建项目的可变高度集合。此问题询问如何基于静态高度创建项目的可变宽度集合。基本上，完全相反。你试过什么吗？您甚至还没有提供基本的标记。@cimmanon:我不认为为复选框的基本列表提供标记有助于澄清问题，但如果您坚持的话：。是的，我现在是用PHP来做这件事的，因为我不知道如何用纯CSS来做（甚至不知道是否可以做）。谢谢你，但是这个答案会使列的#是静态的。我希望列的数量根据容器的高度而变化。不是真的。它会将div分成列，每个列的高度与容器相同，宽度为容器的六分之一。如您所述，如果只有少量复选框，它们将全部位于一列中。除非您的意思是不希望列数有上限？您想要潜在的无限列？是的，复选框（动态内容）的数量没有上限，因此列的数量也没有上限。但是我想要一个静态高度的容器。我已经玩了一点，如果我喜欢的话，我几乎可以得到我想要的，但我不喜欢它如何处理长的，未损坏的标签。我承认，我很惊讶，即使在

列数为4的情况下，它也流到了>4列。谢谢，flexbox似乎就是我想要的。