css - 修复 Chrome 调整大小行为

Question

<div style="background-color:red;width: 300px;">


 <div style="float:left;border:1px solid yellow;">AAA AAA AAA</div>

 <div style="float:left;border:1px solid green;">BBB BBB BBB</div>


 <div style="clear:both;"></div>

</div>

在此处粘贴以上 HTML:http://htmledit.squarefree.com/

然后在 Chrome 中缩小，您会看到 <div> B 最终将被迫向下排到下一行。如果你在 Firefox 和 IE 中做同样的事情，两者都是 <div> A 和 B 将留在同一行。

在父项上添加高度属性 <div>可能会有帮助，但如果事先不知道内容的高度，这将不可行。

我想知道如何在 Chrome 中解决这个问题。

非常感谢大家。

编辑:在此处上传截图:http://img52.imageshack.us/i/screenshot1xd.jpg/

Answer 1

在你的第一个 div 上，添加这个:

<div style="background-color:red;width: 300px; white-space:nowrap;">

看看是否有帮助。