html - 仅当行数 >1 时，div 上的图像换行才有效

Question

这是我知道的一个奇怪的问题，但我有时间解决它。我有一个带有float: left;属性的图像，但是这种样式只有在 div 有不止一行的情况下才有效。当 div 有 1 行时，它与图像重叠。可能是什么问题？

<div style="
    overflow: hidden;
    width: 600px;
    border: 1px solid black;
    padding: 5px;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 14px;
">
    <img src="images/monkey.jpg" style="
        margin-right: 7px;
        border: 1px solid #C0C0C0;
        padding: 5px;
        float: left;
        height: 62px;
        width: 80px;
    ">
    <div style="
        margin-top: -15px;
        margin-bottom: -15px;
        word-wrap: break-word;
    ">
        <p>
            What's your plan about short posts and such?
        </p>
    </div>
</div>

Answer 1

以下是适用于 Firefox 11 和 Chrome 18 的内容：

<div style="overflow:hidden;width:600px;border:1px solid black;padding:5px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;">
    <img src="images/monkey.jpg" style="float:left;margin-right:7px;border:1px solid #C0C0C0;padding:5px;height:62px;width:80px;">
    <div style="float:left;margin-bottom:-15px;word-wrap:break-word;">
        <p>What's your plan about short posts and such?</p>
    </div>
</div>

这是在其他浏览器中使用的小提琴。