有序列表，根据父div高度自动分为列

Question

我有一个div（对于这个例子，我们称之为#container），其高度设置为页面的100％。在#container中，我有一个有101个项目的有序列表。我正在寻找一种干净，有效的方法，使有序列表基于＃container的高度分成列。可以想象，这个大小的有序列表将垂直扩展，比#containers高度大得多。我希望OL自动分成列，以便#container不必扩展。

Answer 1

您可以尝试这样的事情

#container {
width:100%; //or whatever width you have
height:100%;
}
ul {
padding:0;
margin:0;
list-style:none;   // gets rid of typical behavior of ul
}
li {
position:relative;
width: 200px; // some specific width, play with this value.
height: 200px;
float:left;
}

我建议通过@media指令相应地调整列表项的大小，使用百分比而不是固定大小。

顺便说一句：我相信你也应该使用#container {min-height:100%;}，因为我敢说你在一个屏幕上总是没有可用的空间。