html - CSS HTML如何将div内的图像对齐到右下角

Question

所以我有一个带有背景图片的 div

标记如下

<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> 

我想要做的是保持<img src="/images/leadGen_hand.png"/>右下角的图像浮动到跨度文本的右侧。

当前的 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;
}

Answer 1

我认为使用纯 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;
}

不过，我不知道这是否能保持你想要的布局。

如果图像纯粹是装饰性的，您可以将其作为背景的一部分，然后将其与背景位置一起放置在父元素上。