如何通过 CSS 更改两个 Div 位置 [重复]答案

【问题标题】：How to change two Div placement via CSS [duplicate]如何通过 CSS 更改两个 Div 位置 [重复]
【发布时间】：2020-10-05 20:55:10
【问题描述】：

我有一个html code

<div class="main">
  <div class="child1">I'm working Child 1</div>
  <div class="child2" >I'm working Child 2</div>
  <div class="child3" >I'm working Child 3</div>
</div>
<div class="another">
 <div class="child111">I'm working Child 111</div>
</div>

现在我想通过 CSS 在 Child2 之前但在 Child1 之后显示 Child111

【问题讨论】：

这能回答你的问题吗？ How can I reorder my divs using only CSS?
你之前的意思是什么？在页面上或其他 div 上方？
@JamesBurgess 先生，这与您提到的答案不同，请查看更新问题。

标签： html css

【解决方案1】：

您可以使用网格和网格模板区域，您可以使用网格区域自定义放置订单或列。 grid-area 为您提供行应如何显示的直观表示，并允许您为行命名以提高可读性：

.main {
  display: grid;
  grid-template-areas:
      "first-row"
      "second-row"
  ;
}

.child1 {
  grid-area: first-row;
}

.child2 {
  grid-area: second-row;
}

在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area

【讨论】：

【解决方案2】：

您可以通过使用 Flexbox 并在父容器上设置 flex-direction: column-reverse; 轻松做到这一点。它将反转其子级的顺序。

阅读更多关于Flexbox at MDN的信息。

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

<div class="main">
  <div class="child1">I'm working Child 1</div>
  <div class="child2">I'm working Child 2</div>
</div>

【讨论】：

【解决方案3】：

还有另一种可能性：

.main>div{ float: left;}

或

.main>div{ float: right;}

【讨论】：