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

Question

即使文字长于图像，如何将文字与图像对齐？

单词“ 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>

我如何实现这一目标？

Answer 1

您可以向visible div元素添加值overflow的Example Here属性，以防止内容包装浮动图像。

<强> @MrAlien

.text

---

或.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元素以及图片（建议为Example here），请务必指定一些.text浮动元素。 （的 Updated example ）

---

或者，您可以将左侧width （＆gt; = margin浮动图片）设置为width元素：

.text

<强> {{3}}

Answer 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/