我想在我的网页中心实现一个“中心框架”,就像一个窄而高的页面。我想确保它在左右两边都有 200 像素的空间。以下 css 规则适用于 left,但 right 几乎在 body 的右侧。
div#centerframe
{
background:rgba(255, 255, 255, 0.85);
box-shadow:0em 0.5em 2em 0.3em;
margin-left: 200px;
margin-top: 200px; /* top works too */
margin-right: 200px;
float:left; /* because I want it to expand with its content */
padding-top: 90px;
padding-bottom: 90px;
padding-left: 90px;
padding-right: 90px;
}
我做了一个小提琴来向你展示不良行为,但它在这个小提琴中表现得如我所愿:http: //jsfiddle.net/UMscz/
但是,对于相同的 dom,它在我的网站上不起作用。
身体规则是这样的:
body
{
position:relative;
width:100%;
height:100%;
padding:0;
margin:0;
overflow:auto;
}
我的dom就像
<body>
<div id='centerframe'>
<div id='article_wrapper'>
</div>
</div>
</body>
那么我怎样才能确保'#centerframe'
左右两边都有一定的空间像素呢?
我尝试这样做的原因是我想在页面上显示固定尺寸的广告。
谢谢 !
编辑 :
而且我确信内容中没有任何内容“推动”它伸展。我没有width
在内容中设置任何规则,以便它根据中心框及其填充调整大小。
编辑2:
我发现了问题。但这仍然很奇怪。在 index.php (内联样式)中,我有一些元素可以推动其宽度。但是,当我单击链接并转到 show_article.php 时,中心框的宽度仍与 index.php 中的一样。
因此,当我在 index.php 中删除宽度规则时,它也修复了 show_article.php 中的宽度,即使宽度规则仅在 index.php 中。
那么,当转到另一个页面时,css规则是否仍然存在?它不应该,对吧?