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

不過，我不知道是否在布局中維護了你想要的東西。

如果圖像純粹是裝飾性的，您可以將其作為背景的一部分，然后將其與背景位置放在父元素上。