如何在固定高度div內垂直包裝文本

Question

注：我認爲我沒有想到可能的最佳方式。如果有人對我想問的問題有更好的措辭，請隨意編輯標題。

---

可以說我們有一個具有固定高度（和寬度）的div。

一旦divs的高度增加，就會出現一個滾動條。我想讓文本進入下一個「列」中，而不是滾動條。

例子：

A1   A1 A6 
A2   A2 A7 
A3   A3 A8 
A4 => A4 A9 
A5   A5 
- - - - - - - - - - - <-- where our fixed height is set. 
A6   
A7   
A8   
A9   

值得慶幸的是我們（我認爲），文本實際上是一個無序列表如下圖所示。

<ul> 
<li><a href="">A1</a></li> 
<li><a href="">A2</a></li> 
... 
</ul> 

所以我基本上做一個旋轉木馬與文本，將有一個列約16羅嗦。有沒有直接的方法可以讓文本一旦完成其可用高度就向右移動，還是必須使用javascript解析列表，將它分解爲div並將它們全部浮動？我將根據文本的第一個字母（A，B，C ..）使用錨點向左/向右滾動。

任何幫助將不勝感激。謝謝！

編輯：有一些會針對IE8 +（可能是適度降低對IE6/7），Safari瀏覽器，Chrome和Firefox瀏覽器？我總是忘記添加各種瀏覽器的問題。

Answer 1

這可以通過使用CSS3列很容易做到。下面是一個例子，HTML：

<ul id = "limheight"> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
</ul> 

CSS：

#limheight { 
    height: 300px; /*your fixed height*/ 
    -webkit-column-count: 3; 
     -moz-column-count: 3; 
      column-count: 3; /*3 in those rules is just placeholder -- can be anything*/ 
} 
#limheight li { 
    display: inline-block; /*necessary*/ 
} 

還有一點演示：little link。

希望有幫助！

Answer 2

不知道我是否正確理解了你，但CSS有一個你可能會覺得有用的列屬性。瞭解更多關於在這裏：​​

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

注：< = IE9不工作，所以要小心。