Question

我希望图像显示在div的最底部，div没有设置的高度，因为它根据content-body div中的内容有所变化

<a href="http://facebook.com/page" id="find-us-on-facebook">facebook</a>

以下是带背景图像

的链接的CSS

#featured-left a#find-us-on-facebook:link,
#featured-left a#find-us-on-facebook:visited {
 display: block;
 width: 183px;
 height: 52px;
 text-decoration: none;
 background: url('/images/uploads/images/find-us-on-facebook.png') no-repeat;
 overflow: hidden;
 text-indent: -10000px;
 font-size: 0px;
 line-height: 0px;
}

#featured-left a#find-us-on-facebook:hover {
 background-position: 0 -52px;
 overflow: hidden;
 text-indent: -10000px;
 font-size: 0px;
 line-height: 0px;
}

Answer 1

假设你的意思是你的背景图像并且你仍然希望它保持对齐（就像默认情况下那样）改变

background: url('/images/uploads/images/find-us-on-facebook.png') no-repeat

到

background: url('/images/uploads/images/find-us-on-facebook.png') no-repeat left bottom

Answer 2

将padding-bottom: 52px添加到你的facebook按钮所在的内容div中，该按钮的高度等于按钮的高度（52px）（如果容器底部已经有一些填充，则将其添加到52px或添加偶数更多是在按钮和内容之间创建间隙）并将内容div的position属性设置为position: relative。

然后将您的Facebook按钮位置设置为position: absolute，并将其与bottom: 0以及您认为合适的left或right对齐。

然后还有一个更多的民间解决方案 - 简单地把它放在你放在内容div中的内容的最底层。虽然我认为既然你问这个问题就不能这样做。

Answer 3

尝试

vertical-align:bottom;

这可能有效。

Answer 4

尝试添加以下CSS：

#featured-left {
 position: relative;
}

#featured-left a#find-us-on-facebook {
 position: absolute;
 bottom: 0;
}

Answer 5

试试这个

position: absolute;
bottom: 0;

并确保您希望在最底部显示的div没有position: static

我希望这就是你要找的东西。

需要在div的最底部显示图像

5 个答案: