Question

我试图仅使用CSS来整理我的整个页面，这比我最初预期的要复杂得多。目前我的代码在IE中运行，但在Firefox中没有进行更改。该页面可以看到here。以下是涉及的代码部分：

#wrap {
    width: 960px;
    margin: 0 auto;
    padding: 6px;
    background: #FFFFFF;
}

我的HTML结构是：

<body>
<div id="wrap">
    Gubbins in here.
</div>
</body>

似乎在Firefox中，包装div之后的所有内容都是在它之外创建的。如果我将'float：left'添加到wrap div中，但问题就解决了，但显然所有东西都会向左浮动而不是居中。

非常感谢任何帮助。

Answer 1

将您的标记更改为

<body>
<div id="wrap">
    Gubbins in here.
</div>
</body>

编辑：看看这个链接，你已经做到了。你要添加overflow：auto; #wrap或在包装div上的结束标记之前的末尾添加一个清除div。

此外，在您的示例页面上，wrap div缺少其结束标记。

Answer 2

使用此CSS：

body { text-align:center;}
#wrap {text-align:left; margin: 0 auto; width:960px;}

然后，让我们从你的问题中检查这个陈述：

包装div后面的所有内容都是在它之外创建的

这就是它的工作方式。 不要把任何东西放在你的包裹div之外。把它想象成代理身体。

Answer 3

如果您知道页面的宽度 - 并且已修复，则可以使用以下方法。

现在，利用可能有负余量的事实......