Question

如何防止绝对位置重叠，并根据目标图像的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>

Answer 1

您需要计算#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>

如何移动兄弟在绝对元素下？

1 个答案: