CSS HTML 如何将 div 中的图像对齐到右下角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10320168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS HTML How to align image within div to bottom right
提问by StevieB
So I have a div with a background image
所以我有一个带有背景图片的 div
Mark up as follows
标记如下
<div class="leadgen">
<h3><asp:Literal ID="LeadGenSpotTitleLiteral" runat="server"></asp:Literal></h3>
<img src="/images/leadGen_hand.png"/>
<span>
<asp:Literal ID="LeadGenSpotDescriptionLiteral" runat="server"></asp:Literal>
</span>
</div>
What I am trying to do is to keep the image <img src="/images/leadGen_hand.png"/>on the bottom right floating to the right of the text in the span.
我想要做的是保持<img src="/images/leadGen_hand.png"/>右下角的图像浮动到跨度中文本的右侧。
Current CSS
当前 CSS
#solutionsNav div.leadgen {
background:url(/images/leadGen_bg2.png) no-repeat;
background-size: 100% 100%;
padding: 10px;
color: #FFF;
cursor: pointer;
}
#solutionsNav div.leadgen h3 {
font-weight: bold;
font-family: arial;
color: #ffffff;
font-size: 12pt;
padding-bottom: 3px;
}
#solutionsNav div.leadgen span {
font-family: arial;
color: #ffffff;
font-size: 10pt;
margin: 0;
padding: 0;
}
#solutionsNav div.leadgen img {
padding: 0 5px 10px 10px;
float: right;
}
回答by chipcullen
The only way I could think to keep the image on the right and bottom, using plain CSS, is to position it absolutely:
我能想到的使用纯 CSS 将图像保持在右侧和底部的唯一方法是绝对定位：
#solutionsNav div.leadgen {
background:url(/images/leadGen_bg2.png) no-repeat;
background-size: 100% 100%;
padding: 10px;
color: #FFF;
cursor: pointer;
position: relative;
}
#solutionsNav div.leadgen img {
padding: 0 5px 10px 10px;
position: absolute;
bottom: 0;
right: 0;
}
I don't know if that maintains what you want in the layout, though.
不过，我不知道这是否能保持您想要的布局。
If the image is purely decorative, you could make it part of the background, and then position it with background-position on the parent element.
如果图像纯粹是装饰性的，您可以将其作为背景的一部分，然后将其与父元素上的 background-position 一起放置。
