文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在绝对元素下移动兄弟姐妹？

问如何在绝对元素下移动兄弟姐妹？
EN

Stack Overflow用户

提问于 2018-04-03 04:31:54

回答 1查看 60关注 0票数 0

如何防止绝对位置重叠，并根据目标图像的position + height设置下一个兄弟姐妹的边距？我试图将图像和下面段落之间的页边距设置为10 it。

我更喜欢使用javascript，但如果有任何其他解决方案，请随时分享。代码有点长，所以我也添加了到我这里的代码的链接。

.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>

css

css-position

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-04-03 06:07:10

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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49622299

复制

相似问题

问如何在绝对元素下移动兄弟姐妹？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在绝对元素下移动兄弟姐妹？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在绝对元素下移动兄弟姐妹？
EN