每第 n 个孩子后 CSS 清除答案

【问题标题】：CSS Clear after every nth-child每第 n 个孩子后 CSS 清除
【发布时间】：2023-03-24 23:29:01
【问题描述】：

我在一个容器中有多个宽度相同的项目。由于元素的高度不同，对齐存在问题，如下图所示。

我想在每 3 项后清除 而不更改 html 标记，以便第 4 项进入下一行。我正在尝试添加 nth-child(3):after，但似乎不起作用。

代码如下：

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;
}

演示： http://jsfiddle.net/KPXyw/

【问题讨论】：

标签： html css

【解决方案1】：

其实是

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

【讨论】：

只要他们都有.item这个类。否则.list div:nth-child(3n+1) 或只是.list :nth-child(3n+1)。

【解决方案2】：

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

Updated Fiddle

【讨论】：

【解决方案3】：

您应该使用nth-child(3n+1)，这样它就会发生在每个个子级乘以3的子级之后，而不仅仅是第一个第三个子级。

然后，你应该删除那个:after，你想清除实际的孩子。

【讨论】：

【解决方案4】：

sabof 是对的。但是如果您使用display: inline-block 而不是float:left，那就太好了。请看下面的例子。

.list {
  width: 300px;
  font-size: 0;
}
.item {
  display: inline-block;
  width: 90px;
  font-size: 16px;
  background: yellow;
  margin-right: 5px;
  margin-bottom: 10px;
  vertical-align: top;
}

<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>

【讨论】：

【解决方案5】：

试试这个它的工作原理

.list{
    width: 300px;
    overflow: hidden;
}

.item{
   float: left;
    width: 90px;
    background: yellow;
    margin-right: 5px;
    margin-bottom: 10px;
}

.item:nth-child(4){
    //background: brown;
    clear:both;
}

这些只需要。

【讨论】：

如果你有更多的行用.items 填写，它就不起作用。这是因为您在 nth-child 规则中指定了 4，该规则仅且仅适用于第四个元素。
我尝试了更多项目并且它有效，这就是我发布答案的原因。它可能是项目的宽度（为 .item 指定宽度）。不管它对这个问题有什么作用。我发布了这个特定问题的答案而不是一般性的。你也可以接受。
可能没有指定.list 宽度，这就是为什么在您的情况下它可以工作，因为其他.items 没有空间显示在同一行上，因此它们被移动到下一个。您是否尝试过将 .list 宽度修改为 500 像素？

【解决方案6】：

你可以使用：

.list {
  display:flex;
  flex-wrap: wrap;
  ...
}

见下文：

.list {
  width: 300px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
.item {
  float: left;
  width: 90px;
  background: yellow;
  margin-right: 5px;
  margin-bottom: 10px;
}
.item:nth-child(3) {
  background: brown;
}
.item:nth-child(3):after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

<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>

【讨论】：

【解决方案7】：

使用下面的代码

.item:nth-child(4){clear:both;}

【讨论】：

解释为什么这不起作用：如果你在每 4 个元素之后清除，它会抛出 3 列网格，因为第 8 个 .item 不是第二行中的第一个元素，而是第二。这就是你使用 3n+1 的原因。它需要每三个元素并增加一个。这是一篇关于此数学如何工作的精彩文章。 css-tricks.com/how-nth-child-works