CSS親子高度

我有一些問題，這些代碼片段：CSS親子高度

CSS：

#wrapper{ 
    width: 600px; 
    background: gray; 
} 

#left{ 
    float: left; 
    width: 150px; 
    height: 80px; 
    background: red; 
} 

#right{ 
    float: left; 
    width: 450px; 
    height: 150px; 
    background: yellow; 
}

HTML：

<div id="wrapper"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div>

左翼的高度80px，右的高度爲150像素。我想這個東西出現是這樣的： http://img408.imageshack.us/img408/9978/dream.th.jpg 上面的截圖從IE瀏覽器，當我使用IE瀏覽器這些片段完美工作。但是，當我使用其他瀏覽器（歌劇，FF，Safari，Chrome），我得到這個： http://img408.imageshack.us/img408/869/fact.th.jpg

這不是很酷...我想父母（#wrapper）元素的高度得到兩個孩子的更大的高度。

來源

2009-10-26 user196776

堆棧溢出渲染你的文字這樣（我現在已經修改了，所以不再做那個），因爲它使用降價，而不是BBCode。 – Quentin 2009-10-26 17:27:01

截圖現在不見了。存儲不耐用。 :( – Anthony 2011-11-15 17:12:23

這是IE中的一個錯誤。

Containing floats解釋了您看到此行爲的原因，而Methods for Containing Floats提供了比添加額外標記更好的解決方案。

來源

2009-10-26 17:24:41 Quentin

感謝您的快速回答。我沒有閱讀您所寫的所有內容（兩個鏈接），但我在第二個鏈接中遇到了一個解決方案。我已經放了一個額外的div，並且都是「明確的：都是」。對容器，它的工作！謝謝。馬特鮑爾：謝謝，但我希望這東西成長dinami。 – user196776 2009-10-26 17:36:22

從你的問題來看，那根本不明確。謝謝你澄清。 – 2009-10-26 21:31:35

感謝您快速回答大衛。我沒有閱讀你所寫的所有內容（兩個鏈接），但我在第二個鏈接上遇到了一個解決方案。我已經放了一個額外的div，並且「明確：都是;」到容器，它的工作！謝謝。馬特·鮑爾：謝謝，但我想這件事情增長動態

來源

2009-10-26 17:37:30 user196776

當兩個div中漂浮在還沒有一個固定的高度（或它的高度是<比包含div的最大高度的容器（ s）），你的容器崩潰在一行像素和你的浮動div（s）溢出容器。

要強制容器包含兩個div，您需要在關閉容器前清除兩個浮動塊（s）！換句話說....

CSS

<style> 
#wrapper{ 
    width: 600px; 
    background: gray; 
} 

#left{ 
    float: left; 
    width: 150px; 
    height: 80px; 
    background: red; 
} 

#right{ 
    float: left; 
    width: 450px; 
    height: 150px; 
    background: yellow; 
} 

.clearer{ clear: both;} 
</style>

HTML

<div id="wrapper"> 
    <div id="left"></div> 
    <div id="right"></div> 
    <div class="clearer"></div> 
</div>

來源

2009-10-26 17:37:46 BitDrink

也謝謝你。我從David的回答中找到了這個，但是謝謝！ – user196776 2009-10-26 17:53:17

CSS

#wrapper:after { 
visibility: hidden; 
display: block; 
font-size: 0; 
content: " "; 
clear: both; 
height: 0;}

來源

2011-11-04 22:05:13

只需設置父的溢出風格比其他可見的任何東西，它會環繞兒童內容。

來源

2012-04-12 21:23:28 Adam

我發現的最佳解決方案與羅德里戈的上述類似，但不需要內容中的空格字符（因此也不需要指定字體大小）。如果你讓它成爲一個類，你可以將它應用到任何容器塊，而不僅僅是你的包裝。（我也覺得這是最好不要樣式的ID，但是這是一個不同的問題。）

.clearfix:after { 
    clear: both; 
    content: ""; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 
*:first-child+html .clearfix { /* Optional fix for IE7 */ 
    zoom: 1; 
}

來源

2014-02-17 03:22:09 Caspar

CSS親子高度

回答

相關問題