图像背景不会填写所有div

时间:2012-06-08 09:25:27

标签: html css

背景应该显示在所有div中,但它不可见。

http://jsfiddle.net/uxUqJ/1/

我需要在我的背景中显示所有div。背景是在样式容器div中定义的。等

<div id="container">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</div>

我该如何解决这个问题?

6 个答案:

答案 0 :(得分:3)

我认为你需要在你的CSS中添加overflow:auto; ...我也删除了引号

#content{
    width:1049px;
    overflow:auto;
    background: #000 url(http://s1.wp.com/wp-content/themes/pub/dark-wood/images/postflowerback.png) ;
}
Div目前没有高度......但是你想对背景做什么关于重复或位置,这里是一个很好的参考点https://developer.mozilla.org/en/CSS/background

答案 1 :(得分:1)

您必须指定height属性并设置背景的repeating

#content{
    width:349px;
    height: 700px;
    ...
}

答案 2 :(得分:1)

或者,您可以在关闭text3之后添加<div style="clear:both;"></div>。然后,这会将元素围绕元素拉伸,即使它们是浮动的。

答案 3 :(得分:0)

清除#text div。

添加以下样式:

#text {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

#text:after {
    content:"";
    display:table;
    clear: both;
}

<强>样本: http://jsfiddle.net/uxUqJ/13/

答案 4 :(得分:0)

您的元素已浮动。您需要在关闭包装元素之前清除浮动,以使#content正常增长:

请参阅此working Fiddle示例!

更改您的标记:

<div id="content">
  <div id="text">
    <div id="text_1">...</div>
    <div id="text_2">...</div>
    <div id="text_3">...</div>
    <div style="clear:both;"></div>  <!-- Add this line -->
  </div>
</div>

此外,您可以删除内联样式并使用类。

答案 5 :(得分:0)

将您的CSS更改为智能方式

 <style>#content{ display:table;
    width:1049px;

    background: url("image_src") ;


}
#text{
  display:table-row;
    width:1049px;   
    padding-left:27px;
    padding-right:28px;}

#text_1,#text_2,#text_3{ display:table-cell;


    padding-left: 40px;
    width: 278px;
}#text_3{
    padding-right:40px;
}


</style>