圖像顯示了我正在嘗試完成的操作。所有3個div都包含在800px的包裝中。但第二個div的背景延伸了整個身體的寬度。你可以這樣做保持div的寬度與包裝相同,但是使背景全寬
0
A
回答
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
相關問題
- 1. 全寬vimeo包裝背景
- 2. 全寬度背景,沒有包裝
- 3. 主要內容/包裝背後的全寬div(但有重複背景)
- 4. 960 gs,全寬度背景
- 5. 背景圖像與全高,但響應寬度使用jquery
- 6. 獲取背景的寬度與文本相同,但高度不同
- 7. 使div寬度與其內容寬度相同
- 8. 表列不保持相同的寬度
- 9. 如何在所有頁面寬度上保持背景圖像高度相同?
- 10. Android EditText與適合寬度保持高寬比的背景圖像
- 11. div上的全寬背景顏色
- 12. 全寬子div的背景顏色
- 13. div中的全寬背景色
- 14. 全寬,有限高度的圖像,同時保持長寬比
- 15. 將圖像包裝到div中,但保持長寬比
- 16. 使內容固定寬度,但使DIV背景延伸。 (CSS)
- 17. div內的背景顏色寬度
- 18. 調整自動寬度的背景div
- 19. 固定寬度的div背景
- 20. 給div背景圖像的寬度
- 21. UILabel背景圖像與UICollectionViewCell相同寬度的標籤尺寸
- 22. 保持GridView列寬相同
- 23. 使用Grid.ColumnDefinitions width =「*」,但確保每列是相同的寬度
- 24. DIV標記保持使用100%寬度
- 25. 如何使div的寬度與其同胞一樣寬但不更寬?
- 26. 將div寬度設置爲背景圖像寬度Css?
- 27. 父div不是與子div相同的寬度
- 28. WordPress 85%寬度內容Div背景
- 29. Div背景寬度瀏覽器
- 30. 保持div高度與長寬比相關
爲了得到像你想要的效果可能需要一些額外的元素(僞元素),那會好嗎? – 2013-05-07 01:52:19
@MarcAudet Hi Marc,在發佈這個問題後,我多了一些想法,想出了一種使用額外div的方法,所以如果你的方式使用額外的div,那對我來說沒問題。基本上我的方法是刪除單獨的外包裝,並用單獨的包裝(在這種情況下,因爲我需要打破特殊的div之前的東西,特殊的div後面的東西和特殊的div本身)的獨立包裝。我很想看到你的代碼,請發帖。 – sameold 2013-05-07 01:57:22
您的方法與我以前用於類似問題的方法類似。我正在嘗試一些絕對的元素。如果我得到一些體面的東西,我會發布它。感謝您的反饋。 – 2013-05-07 02:00:43