我正在为类制作作品集页面。我试图让网页在调整浏览器大小时随浏览器一起调整。主要是我在标题中的导航链接。此外，当屏幕已满时，我的导航链接位于右上角。但是当我恢复窗口时它位于中间。我该怎么办？任何帮助将不胜感激。这是我的代码。如果有帮助的话。
#header,
#main,
#footer{
display:block;
position:relative;
float:left;
}
#header,
#footer{
width:1100px;
height:80px;
}
#header{
margin-bottom:2px;
}
#footer{
margin-top:2px;
text-align:right;
border:2px;
}
#main{
width:650px;
height:200px;
margin-left:200px;
margin-right:200px;
margin-top:200px;
}
#leftcol{
float:left;
}
#nav{
border:2px solid #F00;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
<html>
<head>
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
.auto-style1 {
text-align: left;
}
</style>
</head>
<body>
<div class="auto-style1">
<div id="header">Header
<h1>Creative Minds Inc.</h1>
</div>
<div id="nav">Navigation
<ul>
<li><a href="homepage.html">Homepage</a>
</li>
<li><a href="#">Tips and Trick</a>
</li>
</li><a href="aboutme.html">About me</a>
</li>
<li><a href="#">Get in Touch</a>
</li>
</ul>
</div>
<div id="main">Main
<h2>A passion for design and a creative mind.</h2>
<h3>Design, Develop, Dream</h3>
</div>
<div id="sidebar">Navigation</div>
<div id="footer">Footer
<h3>Creative Minds Inc. Jonathan Mourning</h3>
</div>
</div>
</body>
</html>
最佳答案
您可以使用标准的 resize DOM 事件。然后在
window.onresize = function(event) {
...
}
您可以相应地调整 elmenets 的位置和大小。
但是通常，您可以避免固定大小并为 DOM 元素提供百分比值，以便它们在所有屏幕尺寸和比例下自动调整大小。例如，如果您的页面是垂直方向，请将 width 更改为 100% 并让您的 #main 元素始终对齐屏幕中心:
#main{
width:650px; /*or 70% */
height:200px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:200px;
}
这是一个代码示例:http://jsfiddle.net/TZGXf/4/ 这是一个全屏:http://jsfiddle.net/TZGXf/4/embedded/result/
关于css - 如何使网站页面适应浏览器窗口？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18582886/