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

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.我的意思是 - 我没有.

这是一个游乐场.根据需要,底部的外观看起来很不寻常,但我认为在那里我知道图像高度.

Answer 1

由于元素相对于父元素是绝对定位的,因此您可以简单地将元素top: 100%放置在父元素的下边缘.

更新的示例

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

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

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