Question

假设我有一个包含子div的div。容器div设置为margin: 0 auto，因此当宽度增加时，div会在两侧扩展。如果此容器中的div也设置为margin: 0 auto，有没有办法让这个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/

这是尝试使横幅图形背景图像跨越页面的主体宽度，但仍然保持页面内部的内容保持不变。

Answer 1

假设你希望background div在每一方都突出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>

Answer 2

当然可以：

.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/

Answer 3

根据您的推理，有一种更加语义化的方法来实现这一目标：

.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/

在容器div之外扩展一个子div，两边都有余量：0 auto

3 个答案: