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个孩子后清除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！