图像显示了我正在努力完成的事情。所有 3 个 div 都包含在一个 800 像素的包装器中。但是第二个 div 的背景扩展了主体的整个宽度。
最佳答案
我有一个几乎与 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)。
关于css - 保持 div 的宽度与 wrapper 相同,但使背景全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16409815/