動態浮動列高度超過

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/