CSS

Question

我的网站上每行有三个左浮动容器，宽度为 33%，我想为新行的第一个提供属性 clear: both，因为有 12 个容器。

有没有更简单的方法来确定选择器？这是我的方法：

.container:nth-of-type(4), .container:nth-of-type(7), .container:nth-of-type(10) {
    clear: both;
}

我也用“3n”尝试过一些东西，但它对我不起作用...

我知道这行不通...但是有这样的东西吗？

.container:nth-of-type(4,7,10) {
    clear: both;
}

或者有更好的方法吗？感谢每一个答案，谢谢。

.container {
  width: calc((100% - 120px)/3); /* calc because of the padding */
  padding: 0px 20px;
  height: 300px;
  background-color: red;
  float: left;
  display: block;
}

.container:nth-of-child(4), .container:nth-of-child(7), .container:nth-of-child(10) {
  clear: both;
}

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

Answer 1

nth-of-type 伪选择器的工作方式类似于代数方程。如果您使用 nth-of-type(3n)，它将以第 0、3、6 等元素为目标。您需要加 1，使其 nth-of-type(3n+1) 定位到第 1、4、7 等

.container {
  width: calc((100% - 130px)/3); /* calc because of the padding */
  padding: 0px 20px;
  height: 300px;
  background-color: red;
  border: 1px solid black;
  float: left;
  display: block;
}

.container:nth-of-child(3n+1) {
  clear: both;
}

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

Answer 2

尝试使用此代码

.container:nth-child(3n+1){
    clear: both;
}

Answer 3

您可以使用 :nth-of-type(3n+4)，但如果使用 clear:both，所选容器将是行中的唯一容器。请改用 clear: left。

CSS - 每行三个容器

CSS - Three containers per row

html

css-selectors

css-float