css - 如果超过高度则动态 float 列

Question

我有一个关于 <li> 的动态 float 布局的问题在 <ul> 中-容器:

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

我很确定解决方案很明显，但我一直在尝试几种具有宽度和高度的 float 组合。

有任何建议或解决方案吗？

Answer 1

您可以使用 CSS3 列:“CSS Multi-column Layout Module”:

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;
}

演示

http://jsfiddle.net/UTfD9/

支持

这将适用于:

• Safari
• Chrome
• 火狐
• IE10+
• 歌剧 11+

参见:Can I use CSS3 Multiple column layout?