CSS div不改變高度以適合較大的孩子div

好吧，我有一個容器div包含兩個左右浮動的div。這些子div的高度取決於裏面的內容（目前只是文本）。CSS div不改變高度以適合較大的孩子div

問題是容器div的高度沒有正確變化以適合孩子;它只適合右手格子，並不適合左手。

我已將所有div的高度設置爲auto。我也嘗試將較大的小孩div的大小設置爲100％，但似乎沒有效果。

下面列出了CSS的三個相關部分（我還會給出一個鏈接到網站，以便在需要時可以檢查CSS和HTML的其餘部分）。

#container{ 
/* 
The container, contains the page and the footer 
*/ 
    height: auto; /* this is the problem child...*/ 
    width: 1000px; 
    margin: auto; 
    padding-top: 20px; 
    background-color: white; 
} 

#content{ 
/* 
The container, contains the content of the webpage 
*/ 
    height: auto; 
    width: 600px; 
    margin: 10px 10px 0px 10px; 
    background-color: white; 
    float: left; 
} 

#aside{ 
/* 
The aside to be used for additional information 
*/ 
    height: auto; 
    width: 330px; 
    float: right; 
    margin: 10px 10px 0px 10px; 
    padding: 5px 15px 5px; 
    background-color: #E8E8E8; 
    border-radius: 25px; 
}

基本上我想它使容器將是兩個孩子的身高合適的高度（但在這種情況下，它永遠是右手一個我認爲）。但目前它似乎總是匹配較小的一個。

來源

2014-06-25 user3776973

這就是浮動元素髮生的情況 - 它們不影響父母的身高。通過搜索關鍵字「clearfix」可以找到與這種行爲相對應的技術。 – CBroe

看起來像在這裏調用clearfix。嘗試添加一個類到內部div說「浮動」，並使用從兩個div中刪除浮動：左，右css。然後在浮點類中使用display：inline-block。

#container{ 
/* 
The container, contains the page and the footer 
*/ 
    height: auto; /* this is the problem child...*/ 
    width: 1000px; 
    margin: auto; 
    padding-top: 20px; 
    background-color: white; 
} 

#content{ 
/* 
The container, contains the content of the webpage 
*/ 
    height: auto; 
    width: 600px; 
    margin: 10px 10px 0px 10px; 
    background-color: white; 
    /*float: left; */ 
} 

#aside{ 
/* 
The aside to be used for additional information 
*/ 
    height: auto; 
    width: 330px; 
    /* float: right; */ 
    margin: 10px 10px 0px 10px; 
    padding: 5px 15px 5px; 
    background-color: #E8E8E8; 
    border-radius: 25px; 
} 
.flaoters{ 
display:inline-block; 
}

來源

2014-06-25 21:27:12

謝謝。使用它得到了它的工作。 – user3776973

給你的#footer或#container規則，加overflow:auto。這將恢復您在之後由浮動子項創建的行爲。

來源

2014-06-25 21:21:21 j08691

還有一件事可以做：
可以下一邊添加無效的圖片標籤是這樣的：

<img src="nothing.png" height="271px" style="visibility: hidden;">

但是當我想到的第一個答案是最好的。

來源

2014-06-25 21:39:13 Ali

CSS div不改變高度以適合較大的孩子div

回答

相關問題