Question

注意：我认为我没有尽可能好地解决这个问题。如果有人对我要问的问题有更好的措辞，请随意编辑标题。

假设我们有一个具有固定高度（和宽度）的div。

一旦div的高度增加，就会出现一个滚动条。我想要文本进入下一个“列”，而不是滚动条。

示例：

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

注意：在＆lt; = IE9中不起作用，所以要小心。

如何在固定高度的div中垂直包装文本

2 个答案: