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

不过,我不知道是否在布局中维护了你想要的东西.

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