html - 如何创建这种交替布局？

Question

这是我需要使用的 HTML:

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

我尝试了 :nth-child() even/odd/xn+x 等 - 运气不好，我不知道要做什么计算。如果需要，可以通过 PHP 添加动态 CSS 类。

我正在尝试实现这种布局:

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>