保持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; 
}