CSS - три контейнера в строке

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

вы можете использовать :nth-of-type(3n+4), но с clear:both выбранный контейнер будет единственным в строке.Вместо этого используйте clear: left.

Answer 3

Попробуйте использовать этот код

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