2011-09-15 155 views
0

问题是没有在父div的权利填充和在子div中没有​​右边距。我正在使用chrome。溢出:自动 - 没有权利填充和余量,镀铬

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Template</title> 
</head> 
<body> 
    <div style = "padding: 50px; overflow: auto; width: 300px; height: 300px; background-color: red;"> 
     <div style = "width: 500px; height: 500px; background-color: green;"></div> 
    </div> 
    <hr /> 
    <div style = "overflow: auto; width: 300px; height: 300px; background-color: red;"> 
     <div style = "margin: 50px; width: 500px; height: 500px; background-color: green;"></div> 
    </div> 
</body> 
</html> 

回答

0

我发现填充用的解决方案,遗憾的是它不符合保证金工作:

.container { 
 
    overflow: auto; 
 
    width: 300px; 
 
    height: 150px; 
 
    background-color: red; 
 
} 
 
.padding { 
 
    float: left; 
 
    padding: 50px; 
 
} 
 
.content { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: green; 
 
}
<div class="container"> 
 
    <div class="padding"> 
 
    <div class="content"></div> 
 
    </div> 
 
</div>