CSS Очистить после каждого n-го ребенка

У меня есть несколько элементов с одинаковой шириной внутри контейнера. Из-за разных высот элементов, проблема с выравниванием, вы можете увидеть на изображении ниже.

Я хочу очистить после каждого третьего элемента без изменения разметки 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;
}

Demo: http://jsfiddle.net/KPXyw/

Ответ 1

На самом деле это

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

Ответ 2

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

Обновлено 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 {
  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>

Ответ 6

попробуйте эту работу

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

это только нужно.

Ответ 7

Используйте ниже код

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