Parent divs not appear when height：auto

我有兩個父div，contenttop和contentbottom。我一直都設置爲寬度：100％和height：自動（我想他們是基於它們所包含的div流體）在每個那些兩個div我有兩個以上的div：Parent divs not appear when height：auto

#col1, #col2, #col3, #col4 
{ 
    position:relative; 
    width:45.5%; 
    margin: 0 0 10px 3%; 
    padding:0; 
    display:inline; 
    float:left; 
    background-color:yellow; 
}

哪些設置爲流體也就是說，設置爲它們中的任何文本的大小。

我遇到的問題是，除非設置特定高度，否則contenttop和contentbottom div不會顯示。 #col divs是正確表現，但我的內容div的背景顏色沒有出現。

這裏發生了什麼？有沒有解決方案？

下面是完整的CSS：

body 
{ 
    background-color:aquamarine; 
} 

p, p.maintextcontent, h1, h2, h3, h4, h5, h6 
{ 
    margin:0; 
    padding:0; 
} 

#contenttop 
{ 
    position:relative; 
    width:100%; 
    height:auto; 
    background-color:brown; 
    margin:0; 
    padding:0; 
} 

#col1, #col2 
{ 
    position:relative; 
    width:45.5%; 
    margin: 0 0 10px 3%; 
    padding:0; 
    display:inline; 
    float:left; 
    background-color:yellow; 
} 

#contentbottom 
{ 
    clear:both; 
    position:relative; 
    width:100%; 
    height:auto; 
    background-color:#000000; 
    margin:0; 
    padding:0; 
} 

#col3, #col4 
{ 
    position:relative; 
    width:45.5%; 
    margin: 0 0 10px 3%; 
    padding:0; 
    display:inline; 
    float:left; 
    background-color:yellow; 
}

感謝

來源

2013-08-17 user2692260

你能否把一個[的jsfiddle（HTTP：//的jsfiddle 。淨）？ – Adrift

如果不是小提琴，那麼至少是html。 – Martyn0627

對不起，以前沒用過jsfiddle，我只是發送這樣的鏈接嗎？ http://jsfiddle.net/DU8aZ/ – user2692260

這是因爲內容（＃COL1等）是浮動的。這些保持容器的高度。一個常見的解決方案是這一規則添加到您的容器（#contenttop，#contentbottom）：

overflow:hidden;

看看這個簡單的提琴：http://jsfiddle.net/w2DrF/

來源

2013-08-17 15:24:41

啊！完善。溢出：隱藏的伎倆。感謝大家！ – user2692260

Parent divs not appear when height：auto

回答

相關問題