对齐一个div标签下面的另一个标签
问题描述:
我有两个div标签,如下对齐一个div标签下面的另一个标签
<div id="outer">
<div id="lower">hi</div>
<div id="upper">i m on top</div>
</div>
我想首先显示上格,其次是低格,但我不能在HTML改变声明的顺序。
我使用以下CSS
#outer{
position:relative;
}
#upper{
position:absolute;
top:0;
}
但上部与下部重叠。
UPDATE
我解决的情况下方式,因为它不会干扰设计
<html>
<body>
<div id="visible"></div>
<div id="bottom">displayed in second line</div>
<div id="top" style="display:none;">
displayed in first line
<script>
document.getElementById("visible").innerHTML=document.getElementById("top").innerHTML
</script>
</div>
</body>
</html>
通过使用上面的代码,我完全解决了我的使用情况。感谢大家给了答案
答
如果你的两个元素都是未知高度(很可能如果这是动态内容),那么Flexbox将允许您重新排列元素。
#outer {
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
#lower {
-moz-box-ordinal-group: 2;
-webkit-flex-order: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
不利的一面是Flexbox的这种支持是相当低的。这应该适用于Chrome,Firefox,Opera,Safari和IE10。 http://caniuse.com/#feat=flexbox
答
这里有两种解决方案:
你知道上div的高度:
#outer {
position: relative;
}
#lower, #upper {
position: absolute;
left: 0;
}
#lower {
top: 40px; /* upper div's height */
}
#upper {
top: 0;
height: 40px;
}
你知道外div的高度:
#outer {
position: relative;
height: 300px;
}
#lower, #upper {
position: absolute;
left: 0;
}
#upper {
top: 0;
}
#lower {
bottom: 0;
}
+0
这将有助于只有当我们有静态内容我有动态内容反正谢谢你的答案 – 2013-04-22 15:52:25
如果你知道'upper'的高度,你可以使用'position:absolute;顶:300像素; 2013-04-22 15:00:44
它是一个动态内容我猜@cimmanon答案将解决问题 – 2013-04-22 15:50:53