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 回答