我有一个主包装div,里面有2个内容div。position
两个内容div的属性均设置为relative
,但由于某些原因它们重叠,如下所示:
我希望红色框内的div在蓝色框下,并且在弄清楚该怎么做时遇到麻烦。
#wrap {
height: 500px;
width: 350px;
border: 3px solid black;
}
#upper {
position: relative;
width: 40%;
height: 70%;
top: 5%;
left: 2%;
border: 1px solid blue;
text-align: center;
}
#lower {
position: relative;
width: 40%;
height: 20%;
left: 2%;
border: 1px solid red;
}
<div id="wrap">
<div id="upper"></div>
<div id="lower"></div>
</div>
有人可以帮我弄清楚如何正确对齐它们吗?
div#upperDiv的样式具有top:5%,这导致了这种情况的发生。尽管是相对的,但div#upperDiv在div#lowerDiv上占据5%的最高位。解决方案:要么从upperDiv上删除top:5%的样式,要么将相同的top样式添加到lowerDiv。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句