Question

我有完整的背景布局，但白色内容框的位置有一个意想不到的位置，并不总是以不同的屏幕分辨率为中心。我应该让它变成液体还是弹性的？现在已经修好了。

我尝试使用固定宽度的容器作为中间的内容框和边距：0自动，但是没有做任何事情

查看代码：http://avisuals.web.fc2.com/testexample.html

我该怎么办？有什么建议吗？

Answer 1

在你的css文件style.css中按此更改 http://avisuals.web.fc2.com/style.css

#container{
width: 960px;
margin: 0 auto;
}

并从

中删除保证金

#contentbox-top and #content1 and contentbox-bottom

即

#contentbox-top {
margin: 0 auto;
background-image: url(images/content_top.png);
background-repeat: no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/content_top.png,sizingMethod=crop);
width: 700px;
height: 37px;
position: relative;
z-index: 1;
}

#content1 {
margin: 0 auto;
background: url(images/content_middle.png) repeat-y center;
width: 692px;
position: relative;
}

#contentbox-bottom {
margin: 0 auto;
background-image: url(images/content_bottom.png);
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/content_bottom.png,sizingMethod=crop);
background-repeat: no-repeat;
width: 700px;
height: 37px;
position: relative;
}

Answer 2

设置包含您想要居中的元素的元素text-align:center。然后将要居中的元素设置为左右边距auto。那么上面的任何东西都需要有一个宽度，允许它扩展到屏幕的宽度。将其设置为width:auto或者只是省略width属性。

查看您的网站，您希望将#container置于body元素内。确保同时给出#container适当的宽度。

Answer 3

要解决您遇到的问题。我认为您应该设置margin:0 auto。设置margin-top后设置margin-left和margin:0 auto。我认为这可能导致问题

检查demo fiddle。

希望它对你有所帮助。

如何将布局与完整背景对齐？

3 个答案: