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

我有一个父div和6个子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>

1.
2.
3.
4.
5.
6.

我想要这样的结果

2 4 6

---

1 3 5

您可以利用flex布局中的

顺序

属性：

。工作包{
显示器：flex；
宽度：300px；
柔性包装：包装；
}
.工作项：第n个子项（2）{
顺序：1；
}
.工作项：第n个子项（4）{
顺序：2；
}
.工作项：第n个子项（6）{
顺序：3；
}
.工作项：第n个子项（1）{
顺序：4；
}
.工作项：第n个子项（3）{
顺序：5；
}
.工作项：第n个子项（5）{
顺序：6；
}
.工作项目{
宽度：80px；
高度：20px；
边框：实心1px灰色；
文本对齐：居中；
}

1.
2.
3.
4.
5.
6.

您可以使用flexbox并更改第n个子项（奇数）项的顺序：

。工作包{
显示器：flex；
柔性包装：包装；
}
.工作项目{
宽度：33%；
}
.工作项：第n个子项（奇数）{
顺序：1；
}

1.
2.
3.
4.
5.
6.

您可以将：nth-child（）伪类与flex box布局一起使用，例如：

.work-wrap {
  width: 300px;
  display: flex;
  flex-wrap: wrap;
}
.work-item {
  order: 2;
  flex: 1 1 30%;
}
.work-item:nth-child(2n) {
  order: 1;
}

---

使用

n个孩子（偶数）

和

n个孩子（奇数）

选择不同的div；然后按照你的意愿来设计它们。你试过什么，如果有的话？你有什么限制吗？您已经在使用的库？将其作为副本关闭-不过为了清楚起见，需要我列出的两个目标才能完全回答此问题。@TylerH这绝对不是副本。首先，第二个链接不是结果，尽管它显示了如何拆分它，但第一个链接根本没有正确答案，赏金奖励答案使用的是

display:table

。我认为你应该重新考虑这个问题，让人们直接回答这个问题。@Gosi赏金奖答案只是23个答案中的一个。查看重复目标时，请务必阅读所有答案。至于重新打开这个--没有必要，因为它是重复的，而且它已经有了答案。当我试图在实际代码中实现它时，它只形成一列，而不是3列。容器的宽度是多少？我将其设置为100%谢谢，我添加了flex direction:rowYou做得很好。谢谢