CSS更改没有flex的div顺序 [英] CSS change div order without flex

问题描述

给出了以下HTML:

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

我知道我可以和display:flex一起使用:

I know I can do a display:flextogether with:

.class :nth-child(1) { order: 2 }
.class :nth-child(2) { order: 4 }
.class :nth-child(3) { order: 1 }
.class :nth-child(4) { order: 3 }

应该产生

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

有没有一种方法可以不将flexbox与order属性结合使用?

Is there a way to do this without using the flexbox in combination with its order property?

推荐答案

您可以使用具有相似顺序属性的网格布局.

You can use grid layout, which has similar order properties.

.boxes {
  display: grid;
}

.class:nth-of-type(1) {
  order: 2;
}

.class:nth-of-type(2) {
  order: 4;
}

.class:nth-of-type(3) {
  order: 1;
}

.class:nth-of-type(4) {
  order: 3;
}

<div class="boxes">
  <div class="class">1</div>
  <div class="class">2</div>
  <div class="class">3</div>
  <div class="class">4</div>
</div>

这篇关于CSS更改没有flex的div顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！