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

Question

图像显示了我正在努力完成的事情。所有 3 个 div 都包含在一个 800 像素的包装器中。但是第二个 div 的背景扩展了主体的整个宽度。

Answer 1

我有一个几乎与 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;
}

fiddle 引用:http://jsfiddle.net/audetwebdesign/Nbu7G/

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

最里面的容器 .content 具有固定宽度(例如，600px)。

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