在容器div的外部同时在容器div的两边用margin来扩展子div：0 auto

说我有一个包含子div的div。 Container div设置为margin: 0 auto，所以当宽度增加时，div会在两侧展开。如果这个容器内的div也设置为margin: 0 auto，有没有办法让这个div扩展到它的容器div之外并且同等地到达右侧和左侧？在容器div的外部同时在容器div的两边用margin来扩展子div：0 auto

以下示例显示当.background的宽度增加超出容器宽度时，其大小仅从右侧增加而不是从两侧增加。

的CSS和HTML：

.container { 
 
    width: 600px; 
 
    background-color: lightgreen; 
 
    margin: 0 auto; 
 
} 
 
.background { 
 
    width: 300px; 
 
    margin: 0 auto; 
 
    background-color: blue; 
 
} 
 
.content { 
 
    width: 200px; 
 
    background-color: lightblue; 
 
    margin: 0 auto; 
 
}

<div class = "container"> 
 
    <div class = "background"> 
 
    <div class = "content"> 
 
     content 
 
    </div> 
 
    </div> 
 
</div>

http://jsfiddle.net/DpYGm/2/

这是所有试图得到一个横幅图形的背景图像跨越页面的车身宽度，但仍然有页面内部的内容保持不变。

来源

2013-05-07 Emanegux

因此，你想'div.background'为页面的整个宽度？即使它是宽度为600px的包含块“div.container”的孩子？ – 2013-05-07 14:45:56

为什么你不把背景图像放在'div.container'上？ – 2013-05-07 14:48:08

@MarcAudet不会解决我的问题。我不想改变父元素的CSS。 – Emanegux 2013-05-07 14:51:49

你说你想要的background股利50像素每边伸出。你可以在你的CSS这样做：

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

完整的例子：

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 

 
    <style media="all"> 
 

 
     .container { 
 
     width: 500px; 
 
     background-color: lightgreen; 
 
     margin: 0 auto; 
 
     height: 400px; /* for illustration */ 
 
     } 
 
     .background { 
 
     margin: 0 -50px; 
 
     background-color: blue; 
 
     } 
 
     .content { 
 
     width: 200px; 
 
     background-color: lightblue; 
 
     margin: 0 auto; 
 
     } 
 

 
    </style> 
 

 
    </head> 
 
    <body> 
 

 
    <div class = "container"> 
 
     <div class = "background"> 
 
     <div class = "content"> 
 
      content 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </body> 
 
</html>

来源

2013-05-07 14:48:08

的作用就像魅力一般。我要在我的网页和几个浏览器上测试这个答案，然后回复给你。 – Emanegux 2013-05-07 14:56:14

很酷。这是非常防弹的，我想你会发现。 :-) – 2013-05-07 15:01:38

太棒了。适用于IE7,8,9，Chrome，Firefox，Safari。 – Emanegux 2013-05-07 15:26:38

肯定的：

.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; 
}

http://jsfiddle.net/yBcpu/1/

来源

2013-05-07 14:45:53 nick

正是医生点的，谢谢！在Chrome中， – 2014-10-30 21:43:21

有一个更加语义的方式来实现这一目标取决于你的推理：

.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; 
}

将您的背景图像粘贴在.container上离子顶部中心。

http://jsfiddle.net/DpYGm/5/

来源

2013-05-07 14:51:43 Darren

在容器div的外部同时在容器div的两边用margin来扩展子div：0 auto

回答

相关问题