扩展一个DIV的背景超出其界限

我知道这是很常见的，延长一个div的背景以外的含元素的宽度，以例如一个导航条。到目前为止，我已经使用了填充和边距的混合，并且它似乎工作得不错。扩展一个DIV的背景超出其界限

不过，我想扩展包含图像的div的背景：

<div class="row-fluid box"> 
<img src="image.jpg"/> 
</div> 

.box{ 
background:red; 
padding-right:100em; 
padding-left:50em; 
margin-left:-50em /*The background won't move left without setting the margin like 
this for me*/ 
}

当我这样做，图像变得非常小（高度和宽度），以被点无形。这不会发生在使用完全相同的CSS样式的文本中。

我使用的是引导，并给予DIV一类行流体（已包含文本的div工作完全相同的一组上）的。

任何帮助，将不胜感激！

来源

2013-03-04 Matthew Shaw

Ummmm ......这不是一个背景，这是一个嵌入式图像。 – 2013-03-04 18:19:24

对不起，我不知道我理解。你能告诉我如何做不同吗？我只是想有一个真实包含在正常的容器内，但坚决反对它扩展了浏览器的全宽度的背景色的图像。如果我从div中移除图像，那么背景颜色会根据需要扩展整个宽度。 – 2013-03-04 18:28:54

使用CSS背景图像。请参阅：http://stackoverflow.com/search?q=css+background+on+body – 2013-03-04 18:46:53

我发现最简单的方法是将背景应用于引导容器外部的div，如下所示：http://jsfiddle.net/panchroma/qFtNT/。

人们很容易想象发生了什么，它的灵活，和CSS是干净多了。

记得有什么可从关闭和打开引导容器div的次数为更复杂的背景布局阻止你。

HTML

<div class="wideBackground"> 

<div class="container"> 
<div class="row-fluid"> 
..... 
</div> <!-- close row-fluid --> 
</div><!-- close container --> 

</div><!-- close wideBackground -->

CSS

.wideBackground{ 
background-color:red; 
}

来源

2013-03-04 19:45:38

扩展一个DIV的背景超出其界限

回答

相关问题