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

发布时间：2020-12-14 18:56:01 所属栏目：资源来源：网络整理

导读：我有一个列表列表.子列表左侧浮动.见 http://jsfiddle.net/P4Psf/ 有没有办法强制这些列与其邻居的高度相同(即要素1,2和3相等的高度,然后4,5,6等高(但当然不同于1,2,3)等等.等等.)？现在7和8将自己置于5和6以下,实际上应该在4和5以下. 我当然可以使用javasc

我有一个列表列表.子列表左侧浮动.见 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!