css - CSS块布局 - 偶数/奇数？

Question

我在 Wordpress 网站的前端工作。项目布局为：每行2个项目。第一个项目是 2/3 宽度，第二个是 1/3 宽度，第三个也是 1/3，第四个是 2/3。可以有无限数量的项目，但最后一个项目总是 100% 宽度。

这可以通过仅使用 CSS 来完成吗？我想到了 :nth-child(odd) 和 :nth-child(even)。但有时奇数是 2/3，有时是另一个……

谢谢你的帮助。

标签： csslayout

Answer 1

在这里你没有部分/外部元素：

.container {
  display: flex;
  flex-wrap: wrap;
}

.container div {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: solid 1px blue;
  margin: 5px;
  width: 24%;
}

.container div:nth-child(2n),
.container div:nth-child(3n) {
  width: 73%;
}

.container div:nth-child(2n+3) {
  width: 73%;
}

.container div:nth-child(4n),
.container div:nth-child(4n+1) {
  width: 24%;
}

.container div:last-child {
  border: solid 1px red !important;
  width: 100%;
}

<div class="container">

  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
  <div> 4 </div>
  <div> 5 </div>
  <div> 6 </div>
  <div> 7 </div>
  <div> 8 </div>
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
  <div> 4 </div>
  <div> 5 </div>
  <div> 6 </div>
  <div> 7 </div>
  <div> 8 </div>
  <div> Last </div>
</div>