使用CSS中的位置并计算高度[关闭]

Question

关闭。这个问题需要details or clarity。它当前不接受答案。

---

是否要改善此问题？通过editing this post添加详细信息并澄清问题。

关闭52分钟前。

我已将img宽度设置为100％，所以我不知道img的高度。我试图在img的末尾使用绝对位置和顶部位置来设置div。我们可以使用calc（）吗？或其他方法。

注意：我已将img位置设置为固定。

<div class="container">
<img class="image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
</div>

<div class="to-image-bottom">I'm div at the bottom of image</div>

Answer 1

您可以使用bottom代替top来定位元素。例如：

.container{
  position: relative;
}

.container .image{
  width: 100%;
}

.container .to-image-bottom{
  position: absolute;
  bottom: 0; /* position at the bottom of 'positioned' .container */
  width: 100%;
  background: red;
  color: white;
  text-align: center;
}

<div class="container">
    <img class="image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
    <div class="to-image-bottom">I'm div at the bottom of image</div>
</div>