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

我正在嘗試將圖像對齊到容器的底部。但是，由於網站的響應速度很快，當我更改窗口大小時，圖像會向上/向下移動容器，因爲它似乎已固定在頁面上的某個點上。將圖像與響應式容器的底部對齊

有沒有辦法將圖像的基線無限期地固定到容器的基線？本質上，圖像與底部對齊開始，但隨着窗口接觸，文本強制容器展開，最終在圖像下方留下空白。

我對圖像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

回答