Question

我有一个div：

fiddle我的问题。

HTML：

 <div class="listinggitems">
 </div>

CSS：

.listinggitems
{
    min-height:280px;
    width:785px;    
    background: url(images/bgdoodle.png);
    background-repeat:repeat-xy;
    position:relative;
    margin-left:210px;
    margin-top:20px;
}

高度280px高度，背景显示，但当div大小自动增加时，其中的数据增加，背景图像不会增加。我还尝试了background-repeat:repeat-xy;，但在它没有显示后，它也会显示背景280px。手动时我增加div的高度然后增加背景。我必须将动态数据加载到div中，因此我必须使用min-height。

任何建议???

Answer 1

HTML 中的

将最后3行修改为：

            </div>
               <div class="clr"></div> 
            </div>

CSS中的

添加：

.clr{clear:both}

为什么会发生？您将child-divs设置为浮动，这意味着容器div (listinggitems)无法计算出它的实际高度。您需要清除浮动元素，它基本上让容器知道图像的实际大小。

这就是为什么你需要添加一个样式为clear: both;

的元素

Answer 2

您的background-repeat财产声明，background-repeat:repeat-xy;不正确。

使用background-repeat:repeat-x;或background-repeat:repeat-y;或background-repeat:repeat;重复。

请查看以下内容，了解背景重复属性的完整列表。

<强> Link for CSS Background-repeat

Answer 3

尝试这个，

.listinggitems
{
    min-height:280px;
    width:785px;    
    background-image:url(images/bgdoodle.png);
    background-repeat:repeat;
    position:relative;
    margin-left:210px;
    margin-top:20px;
}

http://jsfiddle.net/Hvqww/

Answer 4

如果您更改为

background-repeat:repeat;

即使高度增加，它也能正常工作：

JSFiddle

background-repeat不起作用

4 个答案: