Question

我意识到将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样式的文本不会发生这种情况。

我正在使用bootstrap并给div一类行 - 流（完全相同的设置，使用包含div的文本）。

任何帮助将不胜感激！

Answer 1

我发现最简单的方法是将背景应用于bootstrap容器之外的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;
}

将DIV的背景扩展到其边界之外

1 个答案: