css - 保持 div 的宽度与包装器相同，但使背景全宽

Question

该图像显示了我要完成的工作。所有 3 个 div 都包含在一个 800px 的包装器中。但是第二个 div 的背景延伸了整个身体的宽度。

Answer 1

您可以这样做的一种方法是让三个单独的 div 都在内部居中对齐，具有全宽背景并相互堆叠。

<div class="top">
    <div class="wrap">
        <p>Some content</p>
    </div>
</div>

<div class="mid">
    <div class="wrap">
        <p>Some content</p>
    </div>
</div>

<div class="bottom">
    <div class="wrap">
        <p>Some content</p>
    </div>
</div>

CSS是：

body {
  text-align: center;
}

.top, .bottom {
  background: #aaa;
  width: 100%;
}

.mid {
  background: #616161;
  width: 100%;
}

.wrap {
  width: 800px;
  margin: 0 auto;
  padding: 5px;
}

Answer 2

我有一个与 patkay 几乎相同的解决方案。

我的 HTML：

<div class="outer-wrapper">
    <div class="inner-wrapper">
        <div class="content">Content 1...</div>
    </div>
    <div class="inner-wrapper noted">
        <div class="content">Content 2...</div>
    </div>
    <div class="inner-wrapper">
        <div class="content">Content 3...</div>
    </div>
</div>

还有我的 CSS：

.outer-wrapper {
    width: 100%;
    outline: 1px dotted blue;
}
.inner-wrapper {
    width: inherit;
}
.inner-wrapper.noted {
    background-color: gray;
}
.content {
    width: 600px;
    margin: 10px auto;
    outline: 1px dotted red;
}

小提琴参考：http: //jsfiddle.net/audetwebdesign/Nbu7G/

本质上，我使用.outer-wrapper来设置控制整体宽度，然后.inner-wrapper通过额外的类调用将宽度继承到用于设置背景颜色的.noted。

最里面的容器.content具有固定的宽度（例如，600 像素）。

额外的标记可以使用 HTML5 标记在语义上进行清理，但是这种模式为您提供了许多使用背景图像等的钩子。