如何仅使用CSS重新排序div? [英] How can I reorder my divs using only CSS?
问题描述
给出一个模板,该模板由于其他要求而不能修改HTML,当HTML中的div
不在该div
顺序中时,如何在另一个div
上方显示(重新排列)?这两个div
都包含高度和宽度不同的数据.
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 div
s 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
固定尺寸后,可以很容易地将它们放置在需要的位置,但是我需要一些有关内容可变的想法.为了解决这种情况,请考虑将两者的宽度都设为100%.
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.
我专门在寻找仅CSS的解决方案(如果无法解决,可能必须与其他解决方案配合使用).
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.
推荐答案
此解决方案仅使用CSS并处理可变内容
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屋!