作为任意示例,如果我有两个 div
,中间有一个图像,那么,
<div class="section1">
<h2>Stuff in section one</h2>
</div>
<img src="../img/logo.png" class='myimg'>
<div class="section1">
<h2>Stuff in section two</h2>
</div>
<div class="section2">
<div class="container">
<h2 style="color:white">Stuff in section one</h2>
</div>
</div>
假设我想将该图像显示为一个 block ,并将其向上调整 20 像素。
.myimg{
position: relative;
display: block;
margin-top: 0px;
margin-bottom: 0px;
bottom: 20px;
margin-right: auto;
margin-left: auto;
}
工作正常,但现在 section2
div 开始于图像应该 所在的位置 -- 比实际位置低 20 像素。
有没有办法让下一个元素(在本例中为 section2
)“意识到”之前出现的相对定位的元素,以便它从该元素实际结束的地方开始?
最佳答案
改用负的上边距:
http://cssdeck.com/labs/n3tbf9ro
.myimg{
display: block;
margin-top: -20px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
}
或者去掉前一个元素的底部外边距:
http://cssdeck.com/labs/lsnlxk8i
.section1 :last-child {
margin-bottom: 0;
}
关于html - 使用相对定位定位 div 时,有没有办法使下一个 div "flow"到前一个 div 现在所在的位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17479732/