Question

我遇到了定位问题，我需要在Element 1之前显示Element 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>

CSS和Div定位

1 个答案: