3

だから私は背景画像を持つ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;
}
4

1 に答える 1

6

プレーン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;
}

ただし、それがレイアウトで必要なものを維持しているかどうかはわかりません。

画像が純粋に装飾的なものである場合は、背景の一部にしてから、親要素の background-position で配置できます。

于 2012-04-25T16:54:33.267 に答える