html - css: column-count property - 如何用css修改它来修改每列中的元素数？

Question

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

是否可以在不破坏 html 结构的情况下仅通过 css fix 来完成 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>

谢谢。

Answer 1

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

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

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