HTML CSS圖像 - 定位

我有一個大的DIV信息在頂部。我也有一個圖像，我希望圖像坐在最底部。我可以大量使用它，但必須有更好的方法。某些代碼：HTML CSS圖像 - 定位

圖片：

<div id="containerBody"> 
    <div id="facebookTwitter"> 
    <img src="images/site/common/social-media-twitter-seemeagain-dating2.png"/> 
    </div> 
</div

圖像尺寸約300 * 100和DIV面積約爲960 * 1500

我怎樣才能獲得的圖像坐在DIV的最底部？已經在DIV中的文字和圖像正在使用浮動左邊的位置 - 他們坐在靠近頂部。

THX

來源

2011-09-12 Adam

爲什麼你不使用圖像和底部的相對位置：0％; – George

一種方法是利用您的CSS中的absolute定位來將包含圖像的div精確定位在您想要的位置，位於relative定位的div內。請注意，這是一個重要方面。否則它將被定位absolute與您的瀏覽器窗口有關。

因此，像：

div#containerBody { 
    position: relative; 
} 


div#facebookTwitter { 
    position: absolute; 
    bottom: 0px; 
    height: 35px; //should be your image height 
    width: 120px; //should be your image width 
}

更簡單的解決辦法是隻使用你的containerBody DIV像這樣的background CSS屬性：

div#containerBody { 
    width: 100%; 
    height: 500px; 
    background-image:url('images/site/common/social-media-twitter-seemeagain-dating2.png'); 
    background-repeat: no-repeat; 
    background-position: center bottom; 
}

我對JSFiddle做出了表率這裏爲你。

來源

2011-09-12 10:26:52 Jules

試試這個CSS：

#facebookTwitter{ 
position:relative; 
} 


#facebookTwitter img{ 
position:absolute; 
bottom:0px; 
}

來源

2011-09-12 10:21:50

#facebookTwitter img{ 
     vertical-align:bottom; 
}

來源

2011-09-12 10:22:15

你應該使用絕對定位，而不是浮動的。

如果給出頁邊距，頁面變大後頁邊距不會改變，並且圖片不會跟在圖片的底部。

Check this example。

來源

2011-09-12 10:25:30

HTML CSS圖像 - 定位

回答

相關問題