css - 超过高度时的动态浮动列

Question

我有一个关于 -Container<li>中的动态浮动布局的问题<ul>：

灰色容器<ul>的固定高度为 150px，其中所有<li>'s 应使用 150px 的最大高度，然后排列在下一列中（参见元素 7、8）

我很确定解决方案是显而易见的，但我一直在尝试几种具有宽度和高度的浮点组合。

任何建议或解决方案？

score 4 · Accepted Answer

您可以使用 CSS3 列：“ CSS 多列布局模块”：

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

ul {
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count:3;
    max-height: 20px;
}

ul > li {
    height: 20px;
}

演示

支持

这将适用于：

score 2 · Accepted Answer

CSS 多列布局扩展了块布局模式，允许轻松定义多列文本。如果行太长，人们阅读文本会有困难；如果眼睛从一行的末尾移动到下一行的开头需要太长时间，他们就会忘记自己在哪一行。因此，为了最大限度地利用大屏幕，作者应该将有限宽度的文本列并排放置，就像报纸一样。

不幸的是，如果不强制在固定位置换行，或者严格限制文本中允许的标记，或者使用英雄脚本，这是不可能用 CSS 和 HTML 实现的。这个限制通过添加新的 CSS 属性来扩展传统的块布局模式来解决。

score 0 · Accepted Answer

您可以计算您的列可以容纳多少li元素并使用pseudo选择器 ( nth-child) 将其拆分为列。查看我制作的演示：http: //jsfiddle.net/QqudC/1/

3 回答 3