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

概述我有一个列表列表.子列表左侧浮动.见 http://jsfiddle.net/P4Psf/ 有没有办法强制这些列与其邻居的高度相同(即要素1,2和3相等的高度,然后4,5,6等高(但当然不同于1,2,3)等等.等等.)？ 现在7和8将自己置于5和6以下,实际上应该在4和5以下. 我当然可以使用javascript,但我希望有一个纯CSS解决方案(至少)在现代浏览器中工作？ 将其添加到您的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

总结

以上是内存溢出为你收集整理的html – 使浮动列表元素相等高(用纯CSS)全部内容，希望文章能够帮你解决html – 使浮动列表元素相等高(用纯CSS)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。