css: column-count 属性——如何用css修改它来修改每列的项目数？答案

【问题标题】：css: column-count property - how to modify it with css to modify the number of items in each column?css: column-count 属性——如何用css修改它来修改每列的项目数？
【发布时间】：2015-01-15 20:02:12
【问题描述】：

有一个http://jsfiddle.net/woyy389L/3链接用于可视化这个问题，它包含4列，列在这个ul中为5+5+5+2=17个项目。

可以在不破坏html结构的情况下仅通过css修复作为5+4+4+4项完成吗？

在 Firefox 和 Chrome 中正常显示。

css代码为：

ul{
   -webkit-column-count: 4;
    -moz-column-count: 4;    
    border:1px solid red;
}

HTML代码是：

<ul>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
        <li><a class="myclass" href="#"><span>bbb</span></a></li>
</ul>

谢谢。

【问题讨论】：

不要认为这是可能的，因为它总是会从左到右填满列，只要第一列接受 5 个值，第二和第三列也将有 5，第四列将得到剩下的

标签： html css google-chrome firefox dom

【解决方案1】：

据我所知，目前仅使用 HTML/CSS 是不可能的。

Chris Coyier 的 CSS Tricks 很好地概述了当前的可能性：http://css-tricks.com/guide-responsive-friendly-css-columns/

为了实现您的目标，您必须更改 HTML 或使用 jQuery 在您需要的位置插入关闭和打开 ul 标记并相应地设置样式。

【讨论】：