html – 使浮动列表元素相等高(用纯CSS)

我有一个列表列表.子列表左侧浮动.见 http://jsfiddle.net/P4Psf/

有没有办法强制这些列与其邻居的高度相同(即要素1,2和3相等的高度,然后4,5,6等高(但当然不同于1,2,3)等等.等等.)？

现在7和8将自己置于5和6以下,实际上应该在4和5以下.

我当然可以使用javascript,但我希望有一个纯CSS解决方案(至少)在现代浏览器中工作？

解决方法

将其添加到您的CSS：

ul.themenBoxen > li:nth-child(3n+1) {
    clear: both;
}

这将以这种形式搜索：

>找到所有匹配的元素：nth-​​child(3n 1),这意味着它的父元素内的每个第三个元素.
>只筛选那些lis的人.
>只筛选那些是ul.themenBoxen的直接后代的人.

或者用英文,直接在ul.themenBoxen里面找到每一个第三个元素,并应用清楚：两者都可以.

注意：我不太清楚IE的支持情况.

Example