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

Here是一些 Playground 。底壳看起来完全符合需要，但我假设我知道图像高度。

Answer 1

由于该元素相对于父元素是绝对定位的相对，您可以简单地使用top: 100% 将其定位在父元素的底部边缘。

Updated Example

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