有一个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>
谢谢。
最佳答案
据我所知,目前仅靠 HTML/CSS 是不可能的。
Chris Coyier 的 CSS 技巧很好地概述了当前的可能性:http://css-tricks.com/guide-responsive-friendly-css-columns/
要实现您的目标,您必须更改 HTML 或使用 jQuery 在您需要的位置插入结束和开始 ul
标记并相应地设置样式。
关于html - css: column-count property - 如何用css修改它来修改每列中的元素数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26997593/