css - 内联 block 元素在 FF/IE 中垂直堆叠，在 Chrome 中水平堆叠？

Question

<div class="content-top" style="width: 990px">
    <div style="width: 722px; margin-right: 20px" class="left-middle"></div>
    <div style="width: 200px" class="right"></div>
</div>

div.left-middle 和 div.right 都是行内 block 元素。在 Chrome 中，它们水平并排显示，就像我希望的那样。在最新的 Firefox 和所有版本的 IE 中，div.left-middle 位于 div.right 之上。没有边距/填充，所以 div.right 有足够的空间。我已经尝试使 div.left-middle 的宽度非常小，只是为了看看 div.right 是否会回到那里，它不会。知道为什么会这样吗？谢谢!

Answer 1

尝试添加

.content-top { white-space: nowrap; }
.content-top > div { white-space: normal; }

这应该约束你的 div 以保持并排对齐