如何防止绝对位置重叠并根据目标图像的 position + height 设置下一个兄弟的边距？我试图将图像和它下面的段落之间的边距设置为 10px。
我更喜欢使用 javascript，但如果有任何其他解决方案，请随时分享。代码有点长，所以我添加了链接到My code Here
.main {
border: 1px solid red;
max-width: 760px;
margin: 0 auto;
positio: relative;
}
img {
width: 100%;
display: block;
}
.content {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
padding: 15px;
}
.div-1,
div-2 {
flex-basis: 100%;
}
.div-6 {
flex-basis: 30%;
background: #f00;
height: 250px;
margin-left: 3%;
}
.div-3 {
flex-basis: 65%;
width: 100px;
border: 1px solid red;
}
#targetIMG {
position: absolute;
z-index: -1;
left: 0;
}<div class="main">
<div class="content">
<div class="div-1"><img src="http://via.placeholder.com/700x100" alt="" /></div>
<div class="div-2">
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="div-3">
<div class="div-4"><img src="http://via.placeholder.com/700x100" alt="" id="targetIMG" /></div>
<div class="div-5">
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</div>
<div class="div-6"></div>
</div>
</div>最佳答案
您需要计算#targetIMG 图像高度以将margin-top 值设置为如下段落
var img = document.querySelector("#targetIMG");
var para = document.querySelector(".para");
var imgHeight = img.offsetHeight;
para.style.marginTop = (imgHeight + 10) + "px";.main {
border: 1px solid red;
max-width: 760px;
margin: 0 auto;
position: relative;
}
img {
width: 100%;
display: block;
}
.content {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
padding: 15px;
}
.div-1,
div-2 {
flex-basis: 100%;
}
.div-6 {
flex-basis: 30%;
background: #f00;
height: 250px;
margin-left: 3%;
}
.div-3 {
flex-basis: 65%;
width: 100px;
border: 1px solid red;
}
#targetIMG {
position: absolute;
z-index: -1;
left: 0;
}<head>
<script></script>
</head>
<div class="main">
<div class="content">
<div class="div-1"><img src="http://via.placeholder.com/700x100" alt="" /></div>
<div class="div-2">
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="div-3">
<div class="div-4"><img src="http://via.placeholder.com/700x100" alt="" id="targetIMG" /></div>
<div class="div-5">
<p class="para">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</div>
<div class="div-6"></div>
</div>
</div>关于javascript - 如何在绝对元素下移动 sibling ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49622299/