如何用css固定宽度？答案

【问题标题】：How to fix the width with css?如何用css固定宽度？
【发布时间】：2013-06-15 17:15:47
【问题描述】：

我想在我的网页中心实现一个“中心框架”，就像一个又窄又高的页面。我想确保它在左右两边都有 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 规则是否仍然存在？应该不会吧？

【问题讨论】：

标签： css width margin

【解决方案1】：

这会起作用：

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%;
}

（移除左浮动并添加最大宽度）你也可以用 2 个固定大小的 div 包裹你的中心 div。

我猜你正在使用像 drupal 或 Joomla 这样的框架。从您的浏览器 (ctrl+u) 查看 show_article.php 的源代码，其中必须包含带有您的 css 规则的 index.php 标头

【讨论】：