將圖像與響應式容器底部對齊

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，高度設置為自動； 和容器高度也自動

Answer 2

在這種情況下，您可以使用line-height組合。 當您縮放窗口時，您不需要使用有問題的絕對位置。 如果您需要動態更改容器高度，可以使用@media-query 來實現。

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