将文本与浮动 img 对齐答案

【问题标题】：Aligning text with floated img将文本与浮动 img 对齐
【发布时间】：2016-03-22 04:47:02
【问题描述】：

我想要完成的是将文本与浮动 img 的顶部和左侧对齐，并立即在下方换行，没有边距。当我注释掉“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;
}

【问题讨论】：

注意：'background' 标签应该是 background-color: silver;背景标签有很多属性，所以你需要定义一个。颜色、url、img等
如果你想在浮动元素下激活一个填充，这个元素必须应用填充或设置为边距，codepen.io/gcyrillus/pen/yOMQob否则我不明白你的问题。 p 的填充仅适用于元素本身的内部
你的“P”类应该是 .p

标签： css css-float

【解决方案1】：

完全不清楚预期的结果是什么，但我认为你只需要图像/浮动元素的负下边距。

我想要完成的是将文本与浮动 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>

【讨论】：