2

注意：我不认为我已经用最好的方式表达了这个问题。如果有人对我要问的问题有更好的措辞，请随时编辑标题。

假设我们有一个具有固定高度（和宽度）的 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 的东西？我总是忘记在问题中添加各种浏览器。

4

2 回答 2

4

这可以很容易地使用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*/
}

还有一个小演示：小链接。

希望有帮助！

于 2012-08-25T08:52:00.940 回答
0

不确定我是否理解正确，但 CSS 有一个列属性，您可能会发现它很有用。在此处阅读更多信息：

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

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

于 2012-08-25T08:52:45.150 回答