Question

我有一个带有这些属性的div

#content {
background-image: url('img/cbg.png');
background-position: center top;
background-repeat: repeat-y;
width: 960px;
margin: auto;
padding-bottom:50px;
margin-bottom: 20px;
}

背景只显示70px（我认为）然后停止，然后div中的其余内容就像正常情况一样沿着页面向下移动。如果我设置display：inline-block，它可以正常工作，但不会更新我的div。

Answer 1

如果容器中有浮动元素，则可能无法正确清除浮动。如果这是你的问题，那么有许多解决方法 - 它们被称为“clearfixs”。

One of my favorite write-ups was here。他们在这个例子中使用的CSS就在这里。

div.container {
    border: 1px solid #000000;
    overflow: hidden;
    width: 100%;
}

div.left {
    width: 45%;
    float: left;
}

div.right {
    width: 45%;
    float: right;
}

Answer 2

嗯，你正在做repeat-y，这意味着它只会垂直重复。如果背景图像是70px，那将支持该问题。使用repeat-x或repeat。

Answer 3

它不会再展开，因为您已在浏览器窗口中将#content宽度设置为 960px 。

如果您的图片仅扩展到70px，则可能是因为您使用的图片的实际height。但错误地使用了repeat-y （垂直重复）。

这是background-repeat中的一个简单概念：

如果要垂直重复图像，请创建水平宽度的图像。
如果要水平重复图像，请创建垂直高的图像。

如何让div扩展其内容？

3 个答案: