jquery - 列出 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/