如何创建这种交替布局？答案

【问题标题】：How can I create this alternating layout?如何创建这种交替布局？
【发布时间】：2018-06-14 20:22:32
【问题描述】：

这是我需要使用的 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 类。

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

【问题讨论】：

这个问题显然不是太宽泛，问题提出后不到 30 分钟内给出的答案就证明了这一点（单句后跟代码，不少于）。

标签： html css css-selectors

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

感谢尝试但没那么简单，“偶”“奇”已经试过了，还不够