在其下方的div下方显示HTML中的第一个div

Question

我正在尝试按下第一个div（在HTML中），因此它位于下面的div之下。这是HTML：

<div class="cinner">

<div class="container1"></div>
<div class="container2"></div>

</div>

现在，我希望容器1显示在container2下面，我已将位置：relative放在＆＃34; cinner＆＃34;并尝试了一下位置：绝对在容器2上，但它只是堆叠在彼此的顶部，容器1没有下推。有任何想法吗？感谢。

Answer 1

有两个选项

不使用Flex

在父级和子级中使用transform: scaleY(-1);以反向排序

.cinner {
  float: left;
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}
.cinner div {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}

<div class="cinner">

  <div class="container1">container1</div>
  <div class="container2">container2</div>

</div>

使用Flex

使用display:flex; flex-direction:column-reverse中的.cinner将其设置为反向排序的行

.cinner {
  display:flex;
  flex-direction:column-reverse
}

<div class="cinner">

  <div class="container1">container1</div>
  <div class="container2">container2</div>

</div>

Answer 2

使用flexbox回答。

＆＃13;

＆＃13;

.cinner {
  display: flex; 
  flex-direction: column;
}

.container1 {
  height: 20px; 
  background: green; 
  order: 2
}

.container2 {
  height: 20px; 
  background: red; 
  order: 1
}

＆＃13;

<div class="cinner">

<div class="container1"></div>
<div class="container2"></div>

</div>

＆＃13;

＆＃13;

＆＃13;