Question

假设我们有这样的HTML

<div class="at-end-holder">
   Lorem ipsum dolor sit amet...
  <img src="http://placehold.it/350x150" class="at-end">
</div>

我们希望图像的上边缘与其父母的下边缘保持一致。

如果我们知道图像高度（假设它的150px），那么我们就可以设置bottom: -150px。但是，如果我们不知道它的高度呢？

我不想要使用 js 。我的意思是 - 我没有。

Here是一个游乐场。根据需要，底壳看起来很不寻常，但我认为我知道图像高度。

Answer 1

由于元素绝对位于相对到父级，因此您只需使用top: 100%将其放置在父级的底部边缘。

Updated Example

.at-end-holder.example .at-end {
    top: 100%;
}

＆＃13;

.at-end-holder {
  background-color: #ddd;
  position: relative;
  margin-bottom: 200px;
}
.at-end-holder .at-end {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
}

＆＃13;

<div class="at-end-holder">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis vero veritatis, assumenda reiciendis vel voluptate, rem eaque, ut quisquam qui sit molestias omnis. Officia, illum repellat quasi eius, magni soluta?
  <img src="http://placehold.it/350x150" class="at-end">
</div>

<div class="at-end-holder example">
  <h1>THIS I NEED, BUT I DONT KNOW IMAGE HEIGHT</h1>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis vero veritatis, assumenda reiciendis vel voluptate, rem eaque, ut quisquam qui sit molestias omnis. Officia, illum repellat quasi eiusmagni soluta?
  <img src="http://placehold.it/350x150" class="at-end">
</div>

＆＃13;

CSS - 父级结尾处的绝对定位元素，而不知道它的高度？

1 个答案: