使浮动列表元素等于高度（使用纯css）

Question

我有一份清单清单。子列表左侧浮动。见http://jsfiddle.net/P4Psf/

有没有办法强制这些列与其邻居的高度相同（即元素1,2和3的高度相等，然后4,5,6等高（但当然不同于1,2,3） ）等等。）

当时7和8将自己置于5和6之下，实际上它们应该低于4和5。

我当然可以使用javascript来做到这一点，但我希望有一个纯粹的CSS解决方案可以在（至少）现代浏览器中运行吗？

Answer 1

将此添加到您的CSS：

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

这将以字面形式搜索：

1. 查找与:nth-child(3n+1)匹配的所有元素，表示其父级中的每个第三个元素。
2. 仅过滤li s。
的人
3. 仅过滤那些ul.themenboxen的直接后代。

或者用英语，直接在ul.themenboxen 中找到每个第三个元素，并在其上应用clear: both。

注意：我不确定IE支持率较低。

Example