Question

我做了一个小样本网站，我只是想知道：

当我调整窗口大小时，为什么我的元素会移位？有办法阻止这个吗？

的index.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Clean Layout Demo</title>
<link href="css/cleanLayout.css" rel="stylesheet" type="text/css" />
</head>
<body><center>
<div id="header">
Famous Quotes
</div><!-- end #header -->
<div id="menu">
<a href="#">Home</a> | <a href="icons.html">Icons</a> 
</div><!-- end #menu -->
<div id="content" style="height:auto;"><br />
Famous Quotes<br /><br /><hr noshade="noshade" /><br />
"Be who you are and say what you feel, because those who mind don't matter, and those who matter don't mind."<br />
- Dr. Seuss<br /><br /><hr noshade="noshade" /><br />
"A person who never made a mistake, never tried anything new."<br />
- Albert Einstein<br /><br /><hr noshade="noshade" /><br />
"Shoot for the moon.  Even if you miss, you'll land among the stars."<br />
- Brian Litrell<br /><br /><hr noshade="noshade" /><br />
"Obstacles are things a person sees when he takes his eyes off the goal."<br />
- E. Joseph Cossman<br /><br />
</div><!-- end #content -->
</center></body>
</html>

这是主页代码

和

这是css：

@charset "utf-8";
@font-face {
    font-family: Clean_Layout;
    src:url(../fonts/GeosansLight.ttf)
}

html {
    background-color: #CCC;
}

#header {
    font-family: Clean_Layout;
    font-size:64px;
    text-align:center;
    color:#333;
    background: #999;
    border:2px solid #666;
    border-radius:16px;
    -moz-border-radius:16px;
    -webkit-border-radius:16px;
    padding-top:22px;
    padding-bottom:0;
    width:600px;
    height:100px;
    margin-bottom:5px;
}

#menu {
    font-family: Arial, Helvetica, sans-serif;
    font-size:13px;
    text-align:center;
    color:#333;
    width:500px;
    background-color:#999;
    border:1px solid #666;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    margin-top:3px;
    margin-bottom:5px;
    padding-top:1px;
padding-bottom:1px;
}

#menu a:link {
    text-decoration:none;
    color:#333;
}

#menu a:visited {
    color:#333;
}

#menu a:hover {
    color:#222;
}

#menu a:active {
    color:black;
}

#content {
    font-family:Clean_Layout;
    font-size:24px;
    color:#333;
    background: #999;
    border:3px solid #666;
    border-radius:16px;
    -moz-border-radius:16px;
    -webkit-border-radius:16px;
    width:825px;
    overflow:auto;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:10px;
    padding-right:10px;
    margin-bottom:50px;
}

hr {
    width:120px;
    color:#666;
}

希望代码有帮助

Answer 1

这是页面的小提琴：

http://jsfiddle.net/jasongennaro/rFESw/

由于您已使用

，因此在调整页面大小时页面上的元素会移动

<body><center>

将页面居中。

但是当页面流畅时会发生这种情况。

如果您希望元素是静态的，则需要为其提供absolute或fixed个位置。

这是一个不错的定位概述：http://www.alistapart.com/articles/css-positioning-101/

为什么我的元素取代了？

1 个答案: