Question

给出了以下HTML：

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

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

.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属性结合使用？

Answer 1

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

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

Answer 2

您可以使用left和float: left;

.class {
    position: relative;
    float: left;
    width: 25%;
   }

  .class:nth-child(1) {
    left: 75%;
  }

  .class:nth-child(2) {
    left: 25%;
  }

  .class:nth-child(3) {
    left: -25%;
  }

  .class:nth-child(4) {
    left: -75%;
  }

Answer 3

有很多可能性。当然，最明智的方法是使用flex，但是如果您不希望使用它，一种方法就是这样做。

.container {display: table;}
.class {display: table-row;}
.class:nth-child(3) {display: table-header-group;}
.class:nth-child(2) {display: table-footer-group;}

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

CSS更改没有flex的div顺序

3 个答案: