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

前端之家收集整理的这篇文章主要介绍了html – 使浮动列表元素相等高(用纯CSS)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个列表列表.子列表左侧浮动.见 http://jsfiddle.net/P4Psf/

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

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

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

解决方法

将其添加到您的CSS:
ul.themenBoxen > li:nth-child(3n+1) {
    clear: both;
}

这将以这种形式搜索:@H_502_3@

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

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

注意:我不太清楚IE的支持情况.@H_502_3@

Example@H_502_3@

原文链接:/html/224792.html

猜你在找的HTML相关文章