目前,我有一个容器div

#container {
   margin: 0 auto;
   margin-top: 10px;
   width:800px;
   background-color:#eaeced;
}


在该div中,我想添加一个内容框,我已经完成了这样的操作

#contentbox {
   background-color: #fff;
   width: 400px;
   margin: 5px;
}


一旦我在#contentbox div中写了一些文本,这个div就覆盖了整个#container div ...我尝试使用填充,但这会增加容器的原始大小。

我刚刚尝试添加margin: 5px;,但这只会在两侧创建空间。.不在顶部或底部。

抱歉,我对此很陌生,希望能有所帮助

谢谢 :)

最佳答案

信息不多,但是我认为您想要的是这样的东西:

#container {
    margin: 0 auto;
    margin-top: 10px;
    width: 790px;
    background-color:#eaeced;
    padding: 5px;
}

#contentbox {
    background-color: #fff;
    width: 400px;
    padding: 1px 0;
}

p {margin: 1em 0;}


假定这样的HTML:

<div id="container">
  <div id="contentbox">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</div>


首先将所需的填充移到#container上,您可以将#container的宽度调整为所需的宽度,减去左/右填充的总和-这将使框的宽度保持所需。

然后,您要进行collapsing margins的操作-尽管边距折叠是正确的行为,但除非添加特定的边距,否则您在IE中不会看到它-向<p>添加特定的边距,否则将需要框中的任何其他内容一致的行为,即使它与您可能想要的相反。.p应该具有默认边距,并且它们是某些浏览器(例如FF)在#contentbox之外折叠的内容。然后将显示崩溃的边距行为,尽管有些会内部和外部使背景崩溃,所以看起来很奇怪。

在内部#contentbox中添加1px顶部/底部填充(或边框也可以)将解决此问题,并确保实际的内容边距留在内容框中

结果是我认为您正在寻找的是..但如果没有发表评论或使用一些代码或JSFiddle示例更新您的问题

关于css - 在嵌套的div中添加内容,而不更改其容器的外观,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/5749391/

10-14 20:43
查看更多