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 |第4项   ITEM2

但结果如下：

  

item1 |第3项   item2 | ITEM4

如果我能够了解为什么会这样，以及是否有办法解决这个问题，那将是很好的。另外我完全清楚我可以用一个简单的浮点方法解决这个问题，但我对一个涉及CSS3列方法的解决方案很感兴趣。

编辑：关于重复投票我应该补充说，当列表有多于或少于4个项目时，它可以正常工作。只有当我有3列和4个项目时才遇到这个愚蠢的问题。

Answer 1

我没有阅读任何规格，但我认为它的工作方式是获取项目数（= 4）并将其除以cols数（= 3）以获得最大行数（小区（4/3）= 2）。

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

如果你想象它试图贪婪地填充列而不是行，那么为什么它会这样做是有意义的。我想它并不是以你想要的方式使用它

Answer 2

解决方案是在第4个和最后一个项目中添加一个具有一定高度的伪：伪将保留在第2列中，第4个和最后一个项最终显示在第3列中。< / p>

Codepen 以及其他一些不应修改的案例

相关CSS：

li:nth-child(4):last-child:before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: red;
}

编辑：它不会与overflow: hidden很好用，也许其他属性会为项目提供块格式化上下文（或者可能只是overflow: hidden）

为什么＆gt;约瑟夫杨已经回答了那个部分。 Codepen with 4 columns and 4 to 7 items还显示，对于5个或6个项目，只填充了3列