在CSS3中,这是可能的。
#columns {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
HTML:
<div id="columns">
<ul>
... lots of lis ...
</ul>
</div>
当列表项超过容器的高度时,它们将溢出到下一列。
也许对于较旧的浏览器,您可以使用JavaScript,因为这似乎比关键功能更美观。