背景应该显示在所有div中,但它不可见。
我需要在我的背景中显示所有div。背景是在样式容器div中定义的。等
<div id="container">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</div>
我该如何解决这个问题?
答案 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) ;
}
答案 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>