如何使DIV匹配浮動的孩子的高度（浮動列），但允許子元素突出在兩側

我設計了一個3列的佈局，基於包含3個浮動div的div。如何使DIV匹配浮動的孩子的高度（浮動列），但允許子元素突出在兩側

問題是容器div不符合列的高度，因爲我打算。它好像根本沒有內容，因此3列垂直伸出。

爲了解決這個問題，我嘗試使用overflow：hidden和它製作了這個技巧，但是我的設計有一個在左邊伸出來的div，因爲這個屬性不會讓任何東西伸出來。

有沒有更好的方法來解決高度問題？謝謝。

2012-09-04 Frildoren

向我們展示你的HTML，告訴我們您目前的CSS，我們展示的圖片你想要它的樣子。理想情況下，發佈一個[SSCCE]（http://sscce.org）[您當前的代碼的實時演示]（http://jsfiddle.net/），以便我們可以看到發生了什麼，並且更容易建議和演示，變化。基本上：幫助我們來幫助你。（要在您的問題中包含更多信息，請使用「編輯」鏈接，在標籤下方;請勿嘗試在評論中張貼代碼。） –

使用clearfix類 - 應該做的工作：

.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
} 
.clearfix { 
    *zoom: 1; 
}

檢查http://jsfiddle.net/YyMjJ/1/

來源

2012-09-04 13:36:22 thpnk

通常可以使容器的高度通過在<div style="clear:both;"></div>投擲之後都可以擴展到其子結束你的孩子..這樣。

<div id="container"> 
    <div class="child0"></div> 
    <div class="child1"></div> 
    <div class="child2"></div> 

    <div style="clear:both;"></div> 
</div>

我不確定這是否被社區認爲是黑客行爲。但我有時候會用它。另外，我看到人們不使用div，而是使用<hr>，並且也適用該風格。

來源

2012-09-04 13:36:49 Kristian

非常感謝，它現在正在工作 – Frildoren

不客氣。不要忘記接受答案。 :) – Kristian

假設我理解正確的問題，你可以使用一個清算DIV：

<div id="dre"> 
     <div class="float" style="height:100px"></div> 
     <div class="float" style="height:200px"></div> 
     <div class="float" style="height:30px"></div> 
     <div id="clear"></div> 
    </div>

見這裏 - http://jsfiddle.net/C7FCC/

來源

2012-09-04 13:37:08 Alex

如何使DIV匹配浮動的孩子的高度（浮動列），但允許子元素突出在兩側

回答

相關問題