html - 根据父 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%;} 因为我敢说你并不总是在一个屏幕上有可用空间。