DIV佈局問題

Question

我有以下頁面上的DIV佈局跨瀏覽器的麻煩：

www.richmindonline.com/index2.html

我已經創建了兩個左右的div邊框，使其易於識別。

看來，IE9嵌套正確的內部DIV內的外部DIV，而Firefox正在分開div的不同。我正在使用「作弊」標籤來將div對齊到中心位置，但我沒有使用這些標籤進行測試，瀏覽器仍然以不同的方式呈現它們。

有問題的div的是在我的註釋行位於：

我知道你們是聰明的，我期待您的幫助！謝謝，羅布

Answer 1

你需要通過添加類似於：<br clear="all"/>或<div style="clear:both; height:0;"></div>清除浮動div並向父div添加寬度，這應該修復它。

更多信息：基於浮動的佈局的一個常見問題是浮動容器不希望拉伸以適應浮動。如果你想添加一個圍繞所有漂浮物的邊框（即容器周圍的邊框），你必須命令瀏覽器以某種方式將容器一直展開。

例如

<div class="parent"> 
    <div style="float:left"></div> 
    <div style="float:left"></div> 
    <div style="float:left"></div> 
    <br clear="all"/> 
</div> 

欲瞭解更多信息：http://quirksmode.org/css/clearing.html