1

我很想嵌套三个 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>

我确实了解填充和边距，它们会添加盒子的“真实”宽度和高度，但我不知道如何将这些盒子放在彼此的内部。我尝试过的事情如下

  1. 使用边距和填充
  2. 在子框的宽度上使用不同的 %。这在一定程度上有效，但根据浏览器窗口的宽度，子项之间的距离比率会发生变化。
4

1 回答 1

0

听起来像一个级联类型的评论列表。

嗯...从#inside 和#header 中删除宽度。DIV 是块级元素。

添加

#holder div {
    padding-left: 10px;
}

#holder 下的每个 DIV 都将继承padding-leftcss 属性。我认为（并希望：P）这就是您想要的。

于 2012-09-06T15:11:32.803 回答