Question

我正在网页上工作，我需要div的背景来覆盖整个页面（100％宽度）。

我的问题是div的内容应该居中在一个950px的div中，该div居中，而背景的div放在一个宽度为950px的div中。

我无法弄清楚我是如何让这个工作的。有人可以帮助我。

Answer 1

我不确定你在寻找什么。是这样的吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
            .outerDiv { width:100%; background:#DEDEDE; }
            .innerDiv { width:950px; margin:0 auto; border:solid 2px #000000; }
        </style>
    </head>
    <body>
        <div class="outerDiv">
            <div class="innerDiv">
                This is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test.
            </div>
        </div>
    </body>
</html>

Answer 2

您可以在this answer中使用其中一种技术来获得100％宽度的背景图像。然后以你的内容div为中心，你只需要这样的东西：

<div style="margin: 0 auto; width: 950px;">
    Your content goes right m'ere
</div>

以上操作是创建一个950px宽的div，其顶部和底部有0px边距，左右边距为auto边距。这会根据W3C visual formatting模型将块级元素集中在其父级中：

如果两个'保证金左'和 'margin-right'是'auto'，他们使用了价值是平等的。这是横向的将元素集中在一起包含块的边缘。

如何在整个页面上创建div跨度的背景

2 个答案: