[英]How do I fixed divs from overlapping centered, static div on browser resize?
我正在尝试构建一个带有侧边栏的两个圆柱布局,侧边栏始终位于页面的左侧,主要内容区域居中,当窗口调整大小时,居中的内容最终会碰到导航栏,但是从不移动任何比它们触摸时更远的地方(剩下的就是:150px)。
有人可以帮我吗?
这是CSS:
@charset "UTF-8";
/* CSS Document */
body,td,th {
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
color: #000;
}
body {
background-color: #FFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 15px;
margin-bottom: 0px;
}
#nav {
position: fixed;
top: 0px;
left: 0px;
width: 150px;
height: 10000px;
background-color: #D61D21;
text-align: right;
}
#nav a:link {
color: #FFF;
text-decoration: none;
}
#nav a:visited {
color: #FFF;
text-decoration: none;
}
#nav a:hover {
color: #FFF;
text-decoration: underline;
}
#main {
width: 810px;
height: 810px;
margin: 0px auto;
}
这是html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<a href="index.php"><img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs"></a>
<p><a href="portfolio.php">PORTFOLIO</a> </p>
<p><a href="logos.php">LOGOS</a> </p>
<p><a href="print.php">PRINT</a> </p>
<p><a href="web.php">WEB DESIGN</a> </p>
<p><a href="photography.php">PHOTOGRAPHY</a> </p>
<p><a href="contact.php">CONTACT</a> </p>
</div>
<div id="main">
ENTER CONTENT HERE
</div>
</body>
</html>
任何帮助是极大的赞赏!
我刚刚学到的一个巧妙的小技巧是让你的#content位置:相对; 然后使其中的所有子元素位置:绝对; 这样,所有子元素都是您的内容区域的绝对元素,内容将调整为任何分辨率。 为我节省了大量的时间,我无法相信我曾浪费多少时间来浪费铺设动态网站。
希望这能为你做点什么。
做这个:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<a href="index.php"><img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs"></a>
<p><a href="portfolio.php">PORTFOLIO</a> </p>
<p><a href="logos.php">LOGOS</a> </p>
<p><a href="print.php">PRINT</a> </p>
<p><a href="web.php">WEB DESIGN</a> </p>
<p><a href="photography.php">PHOTOGRAPHY</a> </p>
<p><a href="contact.php">CONTACT</a> </p>
</div>
<div id="wrapper">
<div id="main">
ENTER CONTENT HERE
</div>
</div>
</body>
</html>
CSS:
#wrapper{
margin-left: 150px;
}
你要做的是在你的主div周围创建一个包装器div,并使该包装div具有150px的左边距,以便它与导航栏并排。 现在主div中的所有调整大小都应限制在包装器内。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.