HTML CSS 图像 - 定位

Question

我有一个很大的 DIV，顶部有信息。我也有一张图片，我希望图片位于最底部。我可以使用较大的余量将其压低，但必须有更好的方法。部分代码:

图片:

 <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 中已有的文本和图像使用向左浮动的位置 - 它们靠近顶部。

谢谢

Answer 1

一种方法是利用 CSS 中的 absolute 定位将包含图像的 div 准确定位在 relative 定位的 div 中您想要的位置。请注意，这是一个重要方面。否则它将相对于您的浏览器窗口定位为绝对。

所以像这样:

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 上为你做了一个例子.