1

我意识到将 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 一个 row-fluid 类（与包含 div 的文本的设置完全相同）。

任何帮助，将不胜感激！

4

1 回答 1

2

我发现最简单的方法是将背景应用于引导容器外部的 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-04T19:45:38.713 回答