嵌套塊元素在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中是水平的？

來源

2012-04-19 LOLapalooza

什麼是你的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並排

來源

2012-04-19 16:10:50 fcalderan

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

嘗試增加

float: left;

你div的風格。這會讓你的div浮在一起。

來源

2012-04-19 15:54:05 Teis

我原本使它們浮動，但我需要的高度由內容設置，所以浮動將無法正常工作。 – LOLapalooza 2012-04-19 15:59:21

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

回答

相關問題