css - Column-count 不会在定义的列数上拆分内容

Question

我有一个列表，我想按列拆分。

<div class="newspaper">
  <ul>
    <li><span>eleemt 1</span>  
    <li><span>eleemt 2</span>  
    <li><span>eleemt 3</span>  
    <li><span>eleemt 4</span>   
    <li><span>eleemt 5</span>   
    <li><span>eleemt 6</span>          
  </ul>
</div>

CSS

.newspaper ul {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
}

输出与我的预期有点不同(只有 3 列 + 2 个空格)。

这里是 my example with column-count on jsfiddle

问题:

1. 这是正常行为吗？
2. 是否可以更改该行为，因此我有 5 列(或我指定的任何数字)？

谢谢。

Answer 1

首先垂直填充列。

现在您有 6 个元素但只有五列，这意味着一列将有两行(它的高度会增加以适应它们)。但是由于所有列都遵循相同的设置，一旦列的高度增加，所有列的高度都会增加。

并且由于垂直填充，第一个可以容纳 2，第二个 2，第三个 2，...

这是列的正常工作方式。

---

所以您确实有 5 列，只是最后两列是空的。