目前,我有一个容器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/