使用浮动图像对齐文本

我想要完成的是将文本与浮动图像的顶部和左侧对齐，并立即在下方无边距地包裹。当我在'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

使用浮动图像对齐文本

回答

相关问题