CSS3 列未正确展开

Question

当我尝试使用包含 3 列且包含 4 项的列表时出现问题。

jsFiddle 示例 here .

下面是使用的代码:

ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    list-style: none;
}

和 HTML:

<ul>
<li> item1 </li>
<li> item2 </li>
<li> item3 </li>
<li> item4 </li>
</ul>

预期的结果是:

item1 | item3 | item4
item2

但是结果是这样的:

item1 | item3
item2 | item4

如果我能深入了解为什么会这样，以及是否有解决此问题的方法，那就太好了。我也完全知道我可以用简单的 float 方法解决这个问题，但我对涉及 CSS3 列方法的解决方案很感兴趣。

编辑:关于重复投票，我应该补充一点，当列表中的元素多于或少于 4 个时，它工作正常。只有当我有 3 列和 4 个元素时，我才会遇到这个愚蠢的问题。

Answer 1

我没有读过任何规范，但我认为它的工作方式是获取元素数 (= 4) 并将其除以列数 (=3) 以获得最大行数(上限(4/3)=2)。

然后它开始填充列，一旦达到此行限制，它们就会移至下一列。显然，4 项只能填充 2 列，每列 2 行高。如果您添加另一个元素，它将流入第三列。

如果您将其想象成试图贪婪地填充列而不是行，那么它为什么这样做是有道理的。我想它只是不打算按照您想要的方式使用它