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