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图像 - 定位

回答

相关问题