2013-05-07 114 views
0

圖像顯示了我正在嘗試完成的操作。所有3個div都包含在800px的包裝中。但第二個div的背景延伸了整個身體的寬度。你可以這樣做保持div的寬度與包裝相同,但是使背景全寬

enter image description here

+0

爲了得到像你想要的效果可能需要一些額外的元素(僞元素),那會好嗎? – 2013-05-07 01:52:19

+0

@MarcAudet Hi Marc,在發佈這個問題後,我多了一些想法,想出了一種使用額外div的方法,所以如果你的方式使用額外的div,那對我來說沒問題。基本上我的方法是刪除單獨的外包裝,並用單獨的包裝(在這種情況下,因爲我需要打破特殊的div之前的東西,特殊的div後面的東西和特殊的div本身)的獨立包裝。我很想看到你的代碼,請發帖。 – sameold 2013-05-07 01:57:22

+0

您的方法與我以前用於類似問題的方法類似。我正在嘗試一些絕對的元素。如果我得到一些體面的東西,我會發布它。感謝您的反饋。 – 2013-05-07 02:00:43

回答

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標記在語義上進行清理,但是此模式爲您提供了很多使用背景圖像的鉤子等。

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; 
} 
+0

我不會用文本對齊:在身體標記的中心,不需要,否則解決方案是相當不錯的。 – 2013-05-07 02:23:01