0

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

4

1 回答 1

0

这将起作用:

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 的源代码,它必须包含 index.php 标头和您的 css 规则

于 2013-06-19T08:57:54.447 回答