嵌套块元素在FF/IE中垂直堆叠，在Chrome中是水平的？

问题描述：

<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都是内嵌块元素。在Chrome中，它们沿水平方向彼此相邻，就像我希望的那样。在最新的Firefox和IE的所有版本中，div.left-middle位于div.right之上。没有保证金/填充，所以div.right有足够的空间。我试过让div.left-middle的宽度非常小，看看div.right是否会回到那里，但不会。任何想法为什么发生这种情况？谢谢！嵌套块元素在FF/IE中垂直堆叠，在Chrome中是水平的？

什么是你的CSS保持一致的一面呢？ – Matthew 2012-04-19 15:57:35

鉴于您没有在联机CSS中显示'display'属性，您能否向我们展示您正在使用的CSS？还有一个我们可以使用的[live demo]（http://jsfiddle.net/）？ – 2012-04-19 16:10:07

答

尝试添加

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

这应该costrain您的div并排

工作精彩。我最初把white-space：nowrap放在.content-top上，它把文本弄乱了，没有想到子div上的空白区域正常。谢谢！！ – LOLapalooza 2012-04-19 16:55:00

答

尝试增加

float: left;

你div的风格。这会让你的div浮在一起。

我原本使它们浮动，但我需要的高度由内容设置，所以浮动将无法正常工作。 – LOLapalooza 2012-04-19 15:59:21

嵌套块元素在FF/IE中垂直堆叠，在Chrome中是水平的？

相关推荐