我很想嵌套三个 div 并拥有每个。我希望外观看起来像每个父母都比它的孩子大 10 像素,并且在水平宽度发生变化时做出响应。当我使用两个 DIV 执行此操作时,一切正常。
CSS
#holder
{
margin:auto;
width:90%;
height:150px;
background-color:#999;
padding:10px;
border: 1px solid;
}
#inside
{
position:relative;
width:100%;
height:100%;
background-color:#9F0;
border: 1px solid;
}
HTML
当我添加第三个孩子时,一切都出错了。中间的孩子(绿色框)部分移出它的父母。
CSS
#holder
{
margin:auto;
width:90%;
height:150px;
background-color:#999;
padding:10px;
border: 1px solid;
}
#inside
{
position:relative;
width:100%;
height:100%;
background-color:#9F0;
border: 1px solid;
padding:10px;
}
#header
{
position:relative;
width:100%;
height:100%;
background-color:#C00;
}
HTML
<div id="holder">
<div id="inside">
<div id="header"/>
</div>
</div>
我确实了解填充和边距,它们会添加盒子的“真实”宽度和高度,但我不知道如何将这些盒子放在彼此的内部。我尝试过的事情如下
- 使用边距和填充
- 在子框的宽度上使用不同的 %。这在一定程度上有效,但根据浏览器窗口的宽度,子项之间的距离比率会发生变化。