html - 如何将 div 排列成两行三列，由偶数和奇数子元素分隔？

Question

<分区>

Answer 1

您可以使用 flexbox 并更改 :nth-child(odd) 项的顺序:

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

.work-item {
  width: 33%;
}

.work-item:nth-child(odd) {
  order: 1;
}

<div class="work-wrap">
  <div class="work-item">1</div>
  <div class="work-item">2</div>
  <div class="work-item">3</div>
  <div class="work-item">4</div>
  <div class="work-item">5</div>
  <div class="work-item">6</div>
</div>