我如何使用CSS重新排列我的div？ [英] How can I reorder my divs with CSS?

问题描述

给定一个模板，其中HTML由于其他要求而不能被修改，怎么可能在另一个 div之上显示（重新排列） div 当他们不是在HTML中的顺序？ div s都包含高度和宽度不同的数据。

 << ; div id =wrapper> 
< div id =firstDiv> 
在这种情况下内容低于
< / div> 
< div id =secondDiv> 
在这种情况下上面的内容
< / div> 
< / div> 
其他元素
  

希望显而易见的结果是：

 在这种情况下上面的内容
在这种情况下内容低于
其他元素
  

当维度固定时，可以很容易地将它们放在需要的位置，但我需要一些关于何时内容可变的想法。为了这种情况，请考虑两者的宽度都是100％。

我特别寻找一种仅用于CSS的解决方案（它可能需要遇到其他解决方案，如果不能平移）。

在这之后还有其他元素。我提出了一个很好的建议，因为我证明了有限的情况 - 考虑到它可能是最好的答案，但我希望确保下面的元素不受影响。

解决方案

此解决方案仅使用CSS并与变量内容

  #wrapper {display：table; } 
 #firstDiv {display：table-footer-group; } 
 #secondDiv {display：table-header-group; } 
  

Given a template where the HTML cannot be modified because of other requirements, how is it possible to display (rearrange) a div above another div when they are not in that order in the HTML? Both divs contain data that varies in height and width.

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

Hopefully it is obvious that the desired result is:

Content to be above in this situation
Content to be below in this situation
Other elements

When the dimensions are fixed it easy to position them where needed, but I need some ideas for when the content is variable. For the sake of this scenario, please just consider the width to be 100% on both.

I am specifically looking for a CSS only solution (and it will probably have to be met with other solutions if that doesn't pan out).

There are other elements following this. A good suggestion was mentioned given the limited scenario I demonstrated -- given that it might be the best answer, but I am looking to also make sure elements following this aren't impacted.

解决方案

This solution uses only CSS and works with variable content

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }

这篇关于我如何使用CSS重新排列我的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！