Как я могу создать этот чередующийся макет?

Question

Это HTML-код, который мне нужно использовать:

<div class="images">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  ...
</div>

Я пытался :nth-child() even/odd/xn+x и т. Д. - не повезло, я не могу понять, какой расчет сделать.Добавление динамических классов CSS через PHP - это нормально, если это необходимо.

Я пытаюсь добиться этого макета:

Answer 1

Вы можете попробовать что-то вроде этого.Ваш шаблон повторяет каждые 4 элемента, поэтому вам нужно учитывать nth-child(4n + x):

.images {
  display:flex;
  min-height:100vh;
  flex-wrap:wrap;
  align-content:flex-start;
}
.image {
  height:50px;
  border:1px solid;
  box-sizing:border-box;
}

.image:nth-child(4n+1),
.image:nth-child(4n+4) {
   width:40%;
   background:red;
}

.image:nth-child(4n+2),
.image:nth-child(4n+3) {
   width:60%;
   background:blue;
}

<div class="images">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>

Answer 2

Вы можете фактически упростить CSS из принятого ответа:

.images {
  display:flex;
  min-height:100vh;
  flex-wrap:wrap;
  align-content:flex-start;
}
.image {
  height:50px;
  border:1px solid;
  box-sizing:border-box;
  width:60%;
  background:blue;
}

.image:nth-child(4n),
.image:nth-child(4n+1) {
   width:40%;
   background:red;
}

<div class="images">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>

Answer 3

.images .odd {
    float:left;
}
.images .even {
    float:right;
}

<div class="images">
  <div class="image odd"></div>
  <div class="image even"></div>
  <div class="image odd"></div>
</div>