如何防止文本在增长时包裹浮动图像？答案

【问题标题】：How to prevent text from wrapping a floated image when it grows?如何防止文本在增长时包裹浮动图像？
【发布时间】：2014-03-21 06:11:38
【问题描述】：

即使文本比图像长，如何将文本与图像对齐？

“comfort and hope”字样与图片右侧的其余文字不一致。

<style>
    .left { float: left; margin: 0em .5em .5em 0; padding-top:5px; padding-left:5px; }
    .right { float: right; margin: 0 0 .5em .5em; }
    .text {margin-right: 15px; padding-bottom: 10px; padding-top:5px;}
    table, th, td {padding: 0px; border: 4px solid white; background-color:#e5e5e5; height:150px; width: 620px}
</style>

<td><a href="/grief-loss/"><img src="/uploads/2013/07/grief-loss.png" width="99" height="123" class="left"><div class="text"><b>Grief, Loss & End of Life Issues</b></a><br> The loss of a loved one can be life changing.  Grief is a difficult and continual journey in which additional support can provide comfort and hope.</div></td>
</tr>

我如何做到这一点？

【问题讨论】：

标签： html css css-float

【解决方案1】：

您可以将值与visible 不同的overflow 属性添加到.text div 元素，以防止内容包裹浮动图像。

Example Here

.text {
    overflow-x: auto; /* or hidden; */
    /* overflow property would create a new block formatting context         */
    /* https://developer.mozilla.org/en-US/docs/CSS/block_formatting_context */
}

或float 左侧的.text 元素以及图像（如@MrAlien 建议的那样），确保将一些width 分配给浮动元素。 (Example here)

或者，您可以将左侧margin (>= width of the floated image) 设置为.text 元素：

.text {
  margin-right: 15px;
  padding-bottom: 10px;
  padding-top:5px;
  margin-left: 110px; /* <-- Added margin */
}

Updated example.

【讨论】：

或者.text 也应该浮动到left :)
@Mr.Alien 谢谢，已添加。

【解决方案2】：

使用内联块而不是浮动

.img, .copy { display: inline-block; vertical-align: top; padding: 0 0.5em; max-width: 100px }

<div class="img">My Image</div>
<div class="copy">This is my long area of copy that is taller than the height of the image.</div>

http://jsfiddle.net/tCQ26/

【讨论】：