Html 将容器div外的子div在两侧等距展开，边距为：0 auto

假设我有一个包含子div的div。容器div设置为

margin:0

auto，因此当宽度增加时，div会在两侧扩展。如果此容器中的div也被设置为

margin:0

auto，是否有办法使此div扩展到其容器div之外，并均匀地到达右侧和左侧

下面的示例显示当.background的宽度增加到容器的宽度之外时，其大小仅从右侧增加，而不是从两侧增加

css和html：

.container{
宽度：600px；
背景颜色：浅绿色；
保证金：0自动；
}
.背景{
宽度：300px；
保证金：0自动；
背景颜色：蓝色；
}
.内容{
宽度：200px；
背景颜色：浅蓝色；
保证金：0自动；
}

内容

当然：

.container {
    width: 600px;
    background-color: #eee;
    margin: 0 auto;
    padding: 10px 0;
}
.background {
    width: 400px;
    margin: 0 auto;
    background-color: blue;
    padding: 10px 0;
}
.content {
    width: 500px;
    background-color: red;
    margin-left: -50px;
}

---

假设您希望

背景

div在两侧各突出50像素。您可以在CSS中执行此操作：

.background {
    margin: 0 -50px 0 -50px;
    background-color: #00F;
}

一个完整的例子：

.集装箱{
宽度：500px；
背景颜色：浅绿色；
保证金：0自动；
高度：400px；/*用于说明*/
}
.背景{
利润率：0-50px；
背景颜色：蓝色；
}
.内容{
宽度：200px；
背景颜色：浅蓝色；
保证金：0自动；
}
内容

根据您的推理，有一种更具语义的方法来实现这一点：

.container {
    background: green url(../path-to-image.jpg) no-repeat top center;
    margin: 0 auto;
    min-height:300px;
}

.content {
    width: 500px;
    background-color: red;
    margin: 0 auto;
    min-height: 300px;
}

将背景图像粘贴在容器上，使其位于顶部中心

---

那么您希望

div.background

成为页面的全宽？即使它是宽度为600px的包含块

div.container

的子块？为什么不将背景图像放在

div.container

？@MarcAudet上呢？这并不能解决我的问题。我不想更改父元素的css。请不要为边界容器设置宽度。使用最小宽度作为起点，然后让它和内容一起浮动。就像Chrome中的魅力一样。我会在我的网页和一些浏览器上测试这个答案，然后再给你回复。酷。它非常防弹，我想你会发现。：-）精彩的。适用于IE7、8、9、Chrome、Firefox和Safari。