列出LI项​​目并在高于父容器时换行

Question

我有一个列表，如果li元素，当它达到父元素的高度而没有滚动条时我想要换行。

实现这一目标的最佳方法是什么？

CSS

ul{height:90px; width:100%; display:block; background-color:grey;}
li{height:20px; width:60px; background-color:red;}

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

这是我的小提琴 http://jsfiddle.net/nalagg/LX4Nb/

目前看起来像这样

希望它看起来像这样

编辑它看起来像css解决方案只能在ie9之上。任何jquery想法请。 谢谢

Answer 1

您可以使用列。但是授予此功能在IE9或更低版本中不起作用。 ul{column-count:3; -webkit-column-count:3; -moz-column-count:3;height:90px; width:100%; display:block; background-color:grey;}

遗憾的是，此解决方案不允许自动列，这意味着它将始终具有该列数并使内容适合。

Answer 2

编辑：我回答后编辑了问题。

将此添加到您的li代码，为您提供2列

float:left;
width:50%;

或者这给你三列

float:left;
width:33.3%;

http://jsfiddle.net/LX4Nb/4/