css - 内联块元素在 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 都是 inline-block 元素。在 Chrome 中，它们水平相邻出现，就像我希望的那样。在最新的 Firefox 和所有版本的 IE 中，div.left-middle 位于 div.right 之上。没有边距/填充，因此 div.right 有足够的空间。我试过让 div.left-middle 的宽度非常小，只是为了看看 div.right 是否会回到那里，它不会。知道为什么会这样吗？谢谢！

Answer 1

try adding

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

this should costrain your div to stay aligned side by side

Answer 2

尝试添加

float: left;

到你的 div 的风格。这将使您的 div 彼此相邻浮动。