2013-08-28 56 views
2

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

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

我對圖像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圖像大量讚賞!

+3

可以顯示完整的代碼PLS? – artSx

+0

完成 - 我通常會鏈接該網站,但客戶需要私人(密碼/用戶名)開發環境。謝謝你的幫助! –

+0

在你的CSS中顯示#ID框,但在你的HTML是.CLASS,錯誤是從這裏來的? =>用.box替換#box {...} – artSx

回答

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

並設置內容爲css,高度爲auto;並且集裝箱高度也是自動的

+0

嗨,謝謝你的回答。當我嘗試使用它時,它將圖像從容器中移出,並最終隨機地浮在頁面中間。 –

0

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

一些搗鼓例如:http://jsfiddle.net/Hxytw/