将图像与响应式容器的底部对齐

我正在尝试将图像对齐到容器的底部。但是，由于网站的响应速度很快，当我更改窗口大小时，图像会向上/向下移动容器，因为它似乎已固定在页面上的某个点上。将图像与响应式容器的底部对齐

有没有办法将图像的基线无限期地固定到容器的基线？本质上，图像与底部对齐开始，但随着窗口接触，文本强制容器展开，最终在图像下方留下空白。

我对图像DIV + CSS如下：

.floatbottom { 

height: 100%; 
position: absolute; 
bottom:0; 
width: 500px; 

}

父容器CSS：

<div id="box"> 
    <div class="floatbottom"> 
     <img src="/images/bottom.png"> 
    </div> 
</div>

任何想法是：在容器

#box{ 

height: auto; 
padding-top: 90px; 
padding-bottom: 90px; 
position: relative; 

}

HTML图像大量赞赏！

可以显示完整的代码PLS？ – artSx

完成 - 我通常会链接该网站，但客户需要私人（密码/用户名）开发环境。谢谢你的帮助！ –

在你的CSS中显示#ID框，但在你的HTML是.CLASS，错误是从这里来的？ =>用.box替换#box {...} – artSx

<div class="container"> 
    <div class="content"></div> 
    <div class="floatbottom"></div> 
</div>

并设置内容为css，高度为auto;并且集装箱高度也是自动的

2013-08-28 10:02:52 neel

嗨，谢谢你的回答。当我尝试使用它时，它将图像从容器中移出，并最终随机地浮在页面中间。 –

在这种情况下，您可以使用line-height组合。你不需要使用绝对位置，当你缩放窗口时，这是有问题的。如果您需要动态更改容器高度，则可以使用@ media-query来完成。

2013-08-28 10:29:01 Lukas

回答