给定一个模板，该模板中的HTML由于其他要求而不能修改，当HTML中的div不在该div中时，如何在另一个div上方显示（重新排列）div？两个div都包含高度和宽度均变化的数据。
<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>
其他元素希望显而易见的是，期望的结果是：
在这种情况下要满足的内容在这种情况下要满足的条件其他元素固定尺寸后，很容易将它们放置在需要的位置，但是当内容可变时，我需要一些想法。对于这种情况，请仅考虑两者的宽度均为100％。
编辑：CSS解决方案是最理想的解决方案。感谢您提到的Javascript选项。不必太在乎什么或为什么（或谁）……我特意在寻找一种仅CSS的解决方案（如果不成功的话，可能必须与其他解决方案配合使用）。
还有一个……在这之后还有其他要素。考虑到我展示的场景有限，因此提到了一个很好的建议-考虑到这可能是最好的答案，但是我还希望确保遵循此条件的元素不会受到影响。
您还可以指定相对于id的位置wrapper，并为包装器内的所有div绝对位置，然后top根据顺序设置div的属性。
的HTML
<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>
的CSS
#wrapper {
position: relative;
}
#firstDiv {
position: absolute;
top: 20px;
}
#secondDiv {
position: absolute;
top: 0px;
}
这是小提琴。
对于动态高度元素，可以使用display：table属性。
的HTML
<div id="wrapper">
<div id="firstDiv">Content to be below in this situation</div>
<div id="secondDiv">Content to be above in this situation Content to be above in this situation Content to be above in this situation Content to be above in this situation Content to be above in this situation
</div>
</div>
的CSS
#wrapper {
display: table;
}
#firstDiv {
display: table-footer-group;
}
#secondDiv {
display: table-header-group;
}
这是小提琴。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句