使用浮動圖像對齊文本

我想要完成的是將文本與浮動圖像的頂部和左側對齊，並立即在下方無邊距地包裹。當我在'p'中註釋填充時，圖像沒有底部邊距，但是我希望填充屬性在我的樣式表中處於活動狀態。使用浮動圖像對齊文本

http://codepen.io/BennyHH/pen/vGxVwz HTML

<div id="box"> 
    <div id="xob"> 
    </div> 
    <p><!-- Text --></p> 
</div>

CSS

#box { 
width: 300px; 
height: 300px; 
background: silver; 
} 

#xob { 
width: 50px; 
height: 55px; 
background: blue; 
float: left; 
margin: 15px 15px 0; 
} 

p { 
padding: 13px 13px 0; 
} 

* { 
box-sizing: border-box; 
}

來源

2016-03-21 Benny

注： '背景' 的標籤應該閱讀背景顏色：銀色;背景標籤有很多屬性，所以你需要定義一個屬性。顏色，網址，img等 – Sparky256

如果你想在浮動元素下激活填充，那麼這個元素需要填充或應用填充，http://codepen.io/gcyrillus/pen/yOMQob else else不瞭解你的問題。 p的填充只應用於元素本身的內部 –

您的'P'類應讀取.p – Sparky256

這不是完全明確預期的結果是什麼要，但我認爲你只需要在圖像上負下邊距/浮動元素。

我想要完成的是將文本與浮動img的頂部和左側對齊，並立即在下面無邊距地包裹。

#box { 
 
    width: 300px; 
 
    height: 300px; 
 
    background: silver; 
 
} 
 
#xob { 
 
    width: 50px; 
 
    height: 55px; 
 
    background: blue; 
 
    float: left; 
 
    margin: 13px; 
 
    margin-bottom: -13px; 
 
} 
 
p { 
 
    padding: 13px; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
}

<div id="box"> 
 
    <div id="xob"> 
 
    </div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
</div>

來源

2016-03-21 20:47:02

使用浮動圖像對齊文本

回答

相關問題