子div擴展出父母div問題

這是一個簡單的代碼在我的HTML：

#mainContent { 
 
     margin:0; 
 
     width:100%; 
 
     height:600px; 
 
     padding: 0 0 30px 0; 
 
    } 
 
    #mainContent #sidebar { /* sidebar inside #mainContent */ 
 
     float:left; 
 
     width:220px; 
 
     height:560px; 
 
     margin:10px 10px 40px 10px; 
 
     padding:10px 5px 10px 5px; 
 
     background-color:#CCCCCC; 
 
    } 
 
    #mainContent #featContent { 
 
     height:560px; 
 
     margin:10px 10px 40px 260px; 
 
     padding:10px 5px 10px 5px; 
 
     background-color:#CCCCCC; 
 
     overflow:auto; 
 
    }

<div id="mainContent"> 
 
    <div id="sidebar"></div> 
 
    <div id="featContent"></div> 
 
</div>

的問題是申報單的一個被放置不當.The #featContent格是走出去其父#mainContent股利因爲我不明白。看看這個jsFiddle here。 #featContent的邊距超出了#mainContent邊界。

來源

2012-10-04 Ajinx999

........................... Demo 嗨現在給#mainContent: overflow:hidden;

#mainContent{ 
overflow:hidden; 
}

Live demo

來源

2012-10-04 06:42:21

非常感謝！有效。 :)但我不明白。怎麼不寫這個螺絲布局？溢出與它有什麼關係？ – Ajinx999

溢出清除子元素............ –

看到鏈接： - http://www.quirksmode.org/css/clearing.html –

添加填充於母公司的股利

#mainContent { 
    margin:0; 
    width:100%; 
    height:auto; 
    padding:10px 5px 40px 5px; background-color:red 
} 
#mainContent #sidebar { /* sidebar inside #mainContent */ 
    float:left; 
    width:220px; 
    height:560px; 
    margin:10px 10px 40px 10px; 
    background-color:#CCCCCC; 
} 
#mainContent #featContent { 
    height:560px; 
    margin:10px 10px 40px 260px; 
    background-color:#CCCCCC; 
    overflow:auto; 
}

演示hrer http://jsfiddle.net/j4C7T/

來源

2012-10-04 06:41:38 Sowmya

如果我們給彩車我們的子容器，所以我們應該清除浮動，所以如果將給予溢出：隱藏;進入我們的父div，所以孩子浮動的元素將清除.... :-) –

我需要在孩子的divs填充，因爲我不希望他們的內容堅持他們的背景顏色的邊緣。 Rohit Azad給出了一個有效的答案！ – Ajinx999

@ Ajinx999我不是在談論子元素填充我談論#maincontent父母div填充，所以我們不應該給填充那裏，我們只能使用溢出：隱藏;作爲rohit我們會得到解決方案....... –

子div擴展出父母div問題

回答

相關問題