CSS沒有flex更改div順序

Question

給出一個HTML：

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

我知道我可以做一個display:flex with 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屬性結合使用的情況下執行此操作？

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>