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

Question

图像显示了我正在尝试完成的操作。所有3个div都包含在800px的包装中。但第二个div的背景延伸了整个身体的宽度。你可以这样做

Answer 1

我有近identitical到一个由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具有固定的宽度（例如600px）。

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

Answer 2

一种方法是有三个独立的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; 
}