4

假设我有一个包含子 div 的 div。容器 div 设置为margin: 0auto，因此当宽度增加时，div 会在两侧扩展。如果这个容器内的 div 也设置为margin: 0auto，有没有办法让这个 div 扩展到它的容器 div 之外，并平等地到达右边和左边？

下面的例子展示了当 .background 的宽度增加超过容器的宽度时，它的大小只从右侧增加，而不是从两侧增加。

CSS和HTML：

.container {
  width: 600px;
  background-color: lightgreen;
  margin: 0 auto;
}
.background {
  width: 300px;
  margin: 0 auto;
  background-color: blue;
}
.content {
  width: 200px;
  background-color: lightblue;
  margin: 0 auto;
}
<div class = "container">
  <div class = "background">
    <div class = "content">
      content
    </div>
  </div>
</div>

http://jsfiddle.net/DpYGm/2/

这一切都是为了让横幅图形背景图像跨越页面的正文宽度，但仍然使页面内部的内容保持不变。

4

3 回答 3

6

假设您希望backgrounddiv 每边突出 50px。您可以在 CSS 中执行此操作：

.background {
    margin: 0 -50px 0 -50px;
    background-color: #00F;
}

一个完整的例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <style media="all">

      .container {
        width: 500px;
        background-color: lightgreen;
        margin: 0 auto;
        height: 400px; /* for illustration */
      }
      .background {
        margin: 0 -50px;
        background-color: blue;
      }
      .content {
        width: 200px;
        background-color: lightblue;
        margin: 0 auto;
      }

    </style>

  </head>
  <body>

    <div class = "container">
      <div class = "background">
        <div class = "content">
          content
        </div>
      </div>
    </div>

  </body>
</html>

于 2013-05-07T14:48:08.970 回答
3

当然：

.container {
    width: 600px;
    background-color: #eee;
    margin: 0 auto;
    padding: 10px 0;
}
.background {
    width: 400px;
    margin: 0 auto;
    background-color: blue;
    padding: 10px 0;
}
.content {
    width: 500px;
    background-color: red;
    margin-left: -50px;
}

http://jsfiddle.net/yBcpu/1/

于 2013-05-07T14:45:53.533 回答
0

根据您的推理，有一种更语义化的方式来实现这一点：

.container {
    background: green url(../path-to-image.jpg) no-repeat top center;
    margin: 0 auto;
    min-height:300px;
}

.content {
    width: 500px;
    background-color: red;
    margin: 0 auto;
    min-height: 300px;
}

将背景图像粘贴在 .container 上，位置居中。

http://jsfiddle.net/DpYGm/5/

于 2013-05-07T14:51:43.367 回答