0

我正在处理一个页面，我想将该页面置于浏览器的中心。它在放大时按预期工作。但是当它缩小时，页面会向右移动。有人可以告诉我我做错了什么吗？谢谢。

在此处输入图像描述

如果我缩小这变成： 在此处输入图像描述

<html>
<head>
<title>Test page</title>
</head>
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />

<body onload="init()";>

<!-- container panel-->
<div id="container">  

    <!-- header panel-->
    <div class="header">sssss</div>

    <div id="main">
    <!-- left panel-->

        <div class="leftpanel">sssss</div>

        <div class="rightpanel">
            <div class="toppanel">sssss</div>
            <div class="content">sssss</div>
        </div>
    </div>

    <!-- footer-->
    <div class="footer">sssss</div>

</div>
</body>
</html>

这也是css部分：

#bg1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #8888ff;
    z-index: 1;
    box-shadow: inset 0px 280px 60px 0px rgba(0,0,0,0.3);
}
#container {
    position: relative;
    z-index: 3;
    width: 1000px;
    margin: 0 auto 0 auto;
    background: #ffffff;
    box-shadow: 0px 15px 15px 5px #444444;
}
#main
{
    position: relative;
    padding: 60px 28px 0px 28px;
    width: 1124px;
}
body 
{ 
    float: center;
    text-align: center; 
    width: 1500px;
    margin:0 auto;
    background-color: 7777ff;
} 
.leftpanel
{
    width: 18%;
    float: left;
    padding: 10;
    padding-top: 20;
    margin-bottom: 40;
    background: orange;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 5px 5px 5px #888;
}
.rightpanel
{
    position: relative;
    width: 70%;
    margin: 0 0 0 160px;
}
.toppanel
{
    margin-left: 70px;
    background-color: #fbbbb9;
    padding: 20px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 5px 5px 5px #888;   
}
.content
{
    margin-left: 70px;
    padding-bottom: 50px;
    background-color: white;
}
.box {
    margin: 0 0 30px 0;
    background-color: orange;
    overflow: hidden;
}
.footer
{
    padding: 40px 0 40px 0;
    text-align: center;
    color: white;
}
4

3 回答 3

1

删除标签上的宽度<body>，这将解决您的问题。

于 2013-09-14T13:55:13.313 回答
1

body不应该有width1500px，应该是 100%； #container应该max-width:1000px; width:100%; 也是，锚定#container到body

请进行以下更改：

#bg1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #8888ff;
    z-index: 1;
    box-shadow: inset 0px 280px 60px 0px rgba(0,0,0,0.3);
}
body #container {
    position: relative;
    z-index: 3;
    max-width:1000px;
    width:100%;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: 0px 15px 15px 5px #444444;
}
#main
{
    position: relative;
    padding: 60px 28px 0px 28px;
    width: 1124px;
}
body 
{ 
    float: center;
    text-align: center; 
    width: 100%;
    margin:0 auto;
    background-color: 7777ff;
} 
.leftpanel
{
    width: 18%;
    float: left;
    padding: 10;
    padding-top: 20;
    margin-bottom: 40;
    background: orange;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 5px 5px 5px #888;
}
.rightpanel
{
    position: relative;
    width: 70%;
    margin: 0 0 0 160px;
}
.toppanel
{
    margin-left: 70px;
    background-color: #fbbbb9;
    padding: 20px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 5px 5px 5px #888;   
}
.content
{
    margin-left: 70px;
    padding-bottom: 50px;
    background-color: white;
}
.box {
    margin: 0 0 30px 0;
    background-color: orange;
    overflow: hidden;
}
.footer
{
    padding: 40px 0 40px 0;
    text-align: center;
    color: white;
}

您可以在 jsfiddle 上看到这一点：http: //jsfiddle.net/MX9kC/

于 2013-09-14T13:58:14.120 回答
0 
<html>
<head>
<title>Test page</title>
</head>
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />

<body onload="init()";>

<!-- container panel-->

<center>
<div id="container">  

    <!-- header panel-->
    <div class="header">sssss</div>

    <div id="main">
    <!-- left panel-->

        <div class="leftpanel">sssss</div>

        <div class="rightpanel">
            <div class="toppanel">sssss</div>
            <div class="content">sssss</div>
        </div>
    </div>

    <!-- footer-->
    <div class="footer">sssss</div>

</div>

</center>
</body>
</html>

它会起作用的

于 2013-09-14T13:48:30.557 回答