Question

我想实现一个＆＃34;中心框架＆＃34;就像我网页中心的一个狭窄而高大的页面。我想确保它在左右两侧都有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;
}

我做了一个小提示，告诉你不良行为，但它在这个小提琴中表现得像我想要的那样： 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'左右有一定的空间像素？

我尝试做的原因是我想在页面上展示固定尺寸的广告。

谢谢！

编辑：

我确信内容中没有任何内容会推动＆＃34;它要伸展。我不会在内容中设置任何width规则，以便根据中心框架及其填充进行调整。

编辑2：

我发现了这个问题。但它仍然很奇怪。我在index.php（内联样式）中有一些推动其宽度的元素。但是，当我点击一个链接，然后转到show_article.php时，中心框架的宽度仍然与index.php一样。

因此，当我删除index.php中的宽度规则时，它也修复了show_article.php中的宽度，即使宽度规则仅在index.php中。

那么，当转到另一个页面时，css规则是否仍然存在？它不应该，对吧？

Answer 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这样的框架。从浏览器中查看show_article.php的来源（ctrl + u），必须包含带有css规则的index.php标题

如何用css修复宽度？

编辑：

编辑2：

1 个答案: