我想在我的网页中央实现一个“中心框架”，例如一个又窄又高的页面。 我想确保它在左右两侧都有 200 像素的空间。以下 css 规则适用于左侧，但右侧几乎在主体的右侧。
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;
}
我制作了一个 fiddle 来向您展示不良行为，但它在这个 fiddle 中的表现与我想要的一样: 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' 在右边和左边有一定的空间像素？
我尝试这样做的原因是我想在页面上显示固定尺寸的广告。
谢谢!
编辑:
而且我确信内容中没有任何内容“插入”它拉伸(stretch)。我没有在内容中设置任何 width 规则，因此它会根据中心框及其填充调整大小。
编辑2:
我发现了问题。但还是很奇怪。我在 index.php(内联样式)中有一些元素可以增加它的宽度。但是当我点击链接并转到 show_article.php 时，中心框的宽度与 index.php 中的一样。
所以当我删除 index.php 中的宽度规则时，它也固定了 show_article.php 中的宽度，即使宽度规则只在 index.php 中。
那么，转到另一个页面时，css 规则是否保留？不应该，对吧？
最佳答案
这会起作用:
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;
padding-top: 90px;
padding-bottom: 90px;
padding-left: 90px;
padding-right: 90px;
max-width:100%;
}
(移除左侧 float 并添加最大宽度) 你也可以用 2 个固定大小的 div 包裹你的中心 div。
我猜您正在使用像 drupal 或 Joomla 这样的框架。 从您的浏览器 (ctrl+u) 查看 show_article.php 的源代码，它必须包含带有您的 css 规则的 index.php header
关于css - 如何用css固定宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17186694/