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

Question

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

有没有一种方法可以将图像的基线无限固定到容器的基线？从本质上讲，图像一开始就与底部对齐，但随着窗口的接触，文本会强制容器展开，最终图像下方会出现空白。

我对图片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>

任何想法都将受到极大的感谢！

Answer 1

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

并设置内容的css，高度为auto；容器高度也为auto

Answer 2

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

一些小提琴，例如：http://jsfiddle.net/Hxytw/