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

Question

我有一个带有 6 个子 div 的父 div，如下所示

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

我想要这样的结果

2 4 6

1 3 5

标签： htmlcss

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>