我正在尝试将图像与容器底部对齐。然而,由于网站是响应式的,当我更改窗口大小时,图像会在容器中上下移动,因为它似乎固定在页面上的某个点。
有没有办法无限期地将图像的基线固定到容器的基线?本质上,图像一开始就与底部对齐,但当窗口接触时,文本会迫使容器展开,最终图像下方会出现空白。
我的图像 div 的 CSS 如下:
.floatbottom {
height: 100%;
position: absolute;
bottom:0;
width: 500px;
}
父容器的CSS:
#box{
height: auto;
padding-top: 90px;
padding-bottom: 90px;
position: relative;
}
容器中图像的 HTML:
<div id="box">
<div class="floatbottom">
<img src="/images/bottom.png">
</div>
</div>
任何想法将不胜感激!