本文介绍了CSS每n个孩子后清除的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个容器内有相同宽度的多个项目。因为元素的高度不同,有对齐的问题,你可以在下面的图像中看到。

I have multiple items with same width inside a container. Because of different heights of the elements, there is problem with the alignment, you can see in image below.

我要在每个第3个项目之后清除,而不更改html 标记,以便第4个项目转到下一行。我试图添加nth-child(3):after,但似乎不工作。

I want to clear after every 3rd item without changing the html markup, so that the 4th item goes to the next row. I'm trying to add nth-child(3):after, but does not seem to work.

以下是代码:

HTML

HTML:

<div class="list">
    <div class="item">Lorem ipsum dolor sit amet,</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
    <div class="item">Lorem ipsum dolor sit amet,</div>
    <div class="item">Lorem ipsum dolor sit amet,</div>
    <div class="item">Lorem ipsum dolor sit amet</div>
</div>

CSS:

.item:nth-child(3):after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

演示:

推荐答案

实际上是

.item:nth-child(3n+1){
    clear:left
}

这篇关于CSS每n个孩子后清除的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 17:59
查看更多