Question

我的网站上每行有三个左浮动容器，其宽度为33％，我想为新行的第一个容器提供clear属性：两个容器，因为有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-每行三个容器

3 个答案: