动态浮动列高度超过

Question

我已经得到了有关的<li>的一个<ul> - 集装箱：和 Example http://i48.tinypic.com/dzynww.png

灰色容器<ul>拥有150像素的固定高度的所有<li>“动态浮动布局的追问s在它应该使用的最大高度为150px，然后安排在下一列（请参阅元素7,8）

我很舒服的解决方案是显而易见的，但我坚持尝试几个浮动组合宽度和高度。

任何建议或解决方案？

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浏览器
• 铬
• 火狐
• IE10 +
• 歌剧11+

参见：Can I use CSS3 Multiple column layout?

Answer 2

http://www.w3schools.com/css3/css3_multiple_columns.asp

https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts

的CSS多列布局的延伸块布局模式以允许文本的多个列的简单的定义。如果线条太长，人们无法阅读文本;如果眼睛从一条线的末端移动到下一条线的起始位置需要很长的时间，那么它们会失去它们所在的路线。因此，为了最大限度地利用大屏幕，作者应该像报纸一样将宽度有限的文本排列在一起。

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

Answer 3

可以计算出有多少li元素的列可以适应并使用pseudo选择（nth-child）把它列拆分。看到我做的演示：http://jsfiddle.net/QqudC/1/