CSS块布局-偶/奇？

Question

我正在使用Wordpress网站的前端。项目的布局为：每行2个项目。第一个项目为2/3宽度，第二个项目为1/3宽度，第三个项目也为1/3，第四个项目为2/3。项目数量可以无限，但最后一个项目的宽度始终为100％。

可以仅使用CSS来完成此操作吗？ 我想到了：nth-​​child（odd）和：nth-​​child（even）。但是有时候奇数是2/3，有时候是奇数...

感谢您的帮助。

Answer 1

尝试使用以下结构创建所需的布局。     

    .container div {
      width:100px;
      height:100px;
      display: inline-block;
      border:solid 1px blue;
      margin:5px;
    }
    .container section {
      width:100%;
      display:flex;
    }
    .container section:nth-child(odd) > div:nth-child(even) {
       width:75%;
    }
    .container section:nth-child(odd) > div:nth-child(odd) {
       width:24%;
    }
    .container section:nth-child(even) > div:nth-child(odd) {
      width:75%;
    }
    .container section:nth-child(even) > div:nth-child(even) {
        width:24%;
    }
    .container section:last-child > div:nth-child(1) { 
      border: solid 1px red !important;
      width:100%;
    }

<div class="container">
    <section> 
    <div> 1 </div>
    <div> 2 </div>
    </section>
    <section>
    <div> 3 </div> 
    <div> 4 </div> 
    </section>

    <section> <div> 5 </div> </section>
</div>

Answer 2

这里没有节/外部元素：

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