html - CSS 和 Div 定位

Question

我遇到了定位问题，我需要在元素 1 之前显示元素 2。这是因为 PHP traitement，第二个元素的 php 代码在最后执行，但我需要在我的页面中显示在第一个 例如:

<div class="Element1">
   Text after Element 2
</div>
<div class="Element2">
   Text before Element 1
</div>

Answer 1

将它们包装在一个容器中，您就可以使用 CSS3 Flexbox。

这样你只需要改变顺序。实际上只需更改一个 div (Element2) 上的顺序，它就会自动切换。您还可以使用 column-reverse 来反转整个列表的顺序。

像这样:

#container {
    width: 240px; height: 240px;
    border: 1px solid gray;
    display: flex;
    flex-direction: column; 
    /* flex-direction: column-reverse; */
    /* use column-reverse if needed to reverse the entire list */
}

.Element1, .Element2 {
    height: 100px;
    margin: 8px;
}

.Element1 {
    order: 2;
    background-color: #00f;
}

.Element2 {
    order: 1;
    background-color: #f00;
}

<div id="container">
  <div class="Element1">
     Text after Element 2
  </div>
  <div class="Element2">
     Text before Element 1
  </div>  
</div>