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

问题：

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

感谢。

Answer 1

首先垂直填充列。

现在您有6个元素，但只有5个列，这意味着一列将有两行（它的高度将增加以适合它们）。但由于所有列都遵循相同的设置，因此一旦列的高度增加，所有列的列都会增加。

由于垂直填充，第一个可以适合2，第二个2，第三个2，...

这是列的正常工作方式。

所以你做有5列，只是最后两列是空的。

Answer 2

这是因为5小于6,6并且不能被5整除，因为你有6个条目。添加更多条目，或更改列数 - 它将正常工作。请参阅updated fiddle。

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

列计数不会在定义的列数上拆分内容

2 个答案: