修正了CSS保證金摺疊

假設我有類似HTML的修正了CSS保證金摺疊

<body id="doc"> 

    <div id="container"> 
    ddd 
    </div> 

</body>

我的CSS是

#doc { 
    margin-top:0; 
    width: 480px; 
    height: 320px; 
    background-color: red; 
    overflow:auto; 
} 

#container { 
    text-align: center; 
    width: 400px; 
    background-color: green; 
    margin: 10px; 
}

似乎使用溢出：汽車沒有幫助，任何想法？

來源

2011-03-15 Howard

一個簡單的解決將是TU使用填充，而不是你的保證金容器上。 – meo 2011-03-15 10:16:33

請參閱：http://stackoverflow.com/questions/5249756/why-are-my-divs-margin-effected-by-content-blocks-inside-of-it/5249872#5249872 - 我列出了許多技巧以「解決」這一點。 – thirtydot 2011-03-15 10:18:17

強制下級做一個明確的向下延伸到最後一個元素：

<style> 
    #doc { 
     margin-top:0; 
     width: 480px; 
     height: 320px; 
     background-color: red; 
     overflow:auto; 
    } 

    #container { 
     text-align: center; 
     width: 400px; 
     background-color: green; 
     margin: 10px; 
    } 


    #stretchmyparent { 
     clear:both; 
    } 
    </style> 

    <body id="doc"> 
     <div id="container"> 
     ddd 
     </div> 

     <div id='stretchmyparent'></div> 
    </body>

來源

2011-03-15 10:26:27

修正了CSS保證金摺疊

回答

相關問題