我想根据内容和浏览器大小修复左右导航栏。我的意思是左侧导航栏始终位于左侧，内容之间有足够的空间。同样，右侧导航栏始终位于右侧，内容之间有足够的空间。 （即使我缩小了浏览器的大小）
我的左侧导航栏没问题。左侧导航栏和内容之间有足够的空间，如果我缩小浏览器的大小，那么它们之间仍有足够的空间。但是，当我缩小浏览器的大小时，右侧导航栏会在内容上重叠。当您运行代码段时，您将看到问题。
更改HTML布局绝对没有必要。这完全是关于 CSS定位！。
body {
background-color: #2da157;
font-family: Verdana;
}
.content {
position: relative;
top: 0px;
left: 200px;
height:auto;
width: 70%;
background-color: #fff;
}
h1 {
color: gray;
}
h2 {
color:#2da157;
}
h3 {
color: #2da157;
}
#leftnav {
margin-top: 20px;
display: inline-block;
position: absolute;
height: auto;
width: auto;
background-color: white;
border: 2px dotted black;
top:0px;
}
#rightnav {
display: inline-block;
position: absolute;
height: auto;
max-width: 150px;
background-color: gray;
border: 2px dotted black;
padding: 10px;
margin-top: 20px;
top: 0px;
right: 10px;
}<!DOCTYPE html>
<html>
<head>
<title>positioning test</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="content">
<h1>welcome to my web site</h1>
<p>Here is a place for some intro text about my web site. I normally have lots to say, but right now I'm at a loss. Lorem ipsum dolor sit amet nonummy ibid lorem ipsum dolor sit amet, nonummy adipiscing atet prosciutto. Lorem ipsum dolor sit amet nonummy ibid lorem ipsum dolor sit amet, nonummy adipiscing atet prosciutto. Lorem ipsum dolor sit amet nonummy ibid lorem ipsum dolor sit amet, nonummy adipiscing atet prosciutto.</p>
<p>Why don't we try another topic...</p>
</div>
<div class="content">
<h2>about the class</h2>
<p>This class has been fantastic! The students are the best students ever. Lorem ipsum dolor sit amet nonummy ibid lorem ipsum dolor sit amet, nonummy adipiscing atet prosciutto. Lorem ipsum dolor sit amet nonummy ibid lorem ipsum dolor sit amet, nonummy adipiscing atet prosciutto. Lorem ipsum dolor sit amet nonummy ibid lorem ipsum dolor sit amet, nonummy adipiscing atet prosciutto.</p>
</div>
<div class="content">
<h2>one more box</h2>
<p>Everything we add to this page adds nicely boxed and centred material down the middle of the page. Lorem ipsum dolor sit amet nonummy ibid lorem ipsum dolor sit amet, nonummy adipiscing atet prosciutto.</p>
<p>Ain't CSS great?</p>
</div>
<div id="leftnav">
<h2>some links</h2>
<p><a href="#">fake link one</a></p>
<p><a href="#">also fake</a></p>
<p><a href="#">artificial</a></p>
<p><a href="#">goes nowhere</a></p>
<p><a href="#">big faker</a></p>
<h2>external links</h2>
<p><a href="http://www.google.ca">Google</a></p>
<p><a href="http://www.cbc.ca">CBC</a></p>
<p><a href="http://www.nfl.com">NFL</a></p>
</div>
<div id="rightnav">
<h2>why are you here?</h2>
<p>Why have you come to my site?</p>
<p>Perhaps you wish to know more about me.</p>
<p>Or more about CSS? Lorem ipsum dolor sit amet nonummy ibid lorem ipsum dolor sit amet, nonummy adipiscing atet prosciutto. Lorem ipsum dolor sit amet nonummy ibid lorem ipsum dolor sit amet, nonummy adipiscing atet prosciutto.</p>
<p>Go away.</p>
</div>
</body>
</html>
答案 0 :(得分：0)
只需在左侧和右侧对内容应用正确的边距，无需指定任何宽度或左侧属性：
body {
background-color: #2da157;
font-family: Verdana;
}
.content {
margin: 0 200px;
height: auto;
background-color: #fff;
}
h1 {
color: gray;
}
h2 {
color: #2da157;
}
h3 {
color: #2da157;
}
#leftnav {
margin-top: 20px;
display: inline-block;
position: absolute;
height: auto;
width: auto;
background-color: white;
border: 2px dotted black;
top: 0px;
}
#rightnav {
display: inline-block;
position: absolute;
height: auto;
max-width: 150px;
background-color: gray;
border: 2px dotted black;
padding: 10px;
margin-top: 20px;
top: 0px;
right: 10px;
}<div class="content">
<h1>welcome to my web site</h1>
<p>Here is a place for some intro text about my web site. I normally have lots to say, but right now I'm at a loss. Lorem ipsum dolor sit amet nonummy ibid lorem ipsum dolor sit amet, nonummy adipiscing atet prosciutto. Lorem ipsum dolor sit amet nonummy
ibid lorem ipsum dolor sit amet, nonummy adipiscing atet prosciutto. Lorem ipsum dolor sit amet nonummy ibid lorem ipsum dolor sit amet, nonummy adipiscing atet prosciutto.</p>
<p>Why don't we try another topic...</p>
</div>
<div class="content">
<h2>about the class</h2>
<p>This class has been fantastic! The students are the best students ever. Lorem ipsum dolor sit amet nonummy ibid lorem ipsum dolor sit amet, nonummy adipiscing atet prosciutto. Lorem ipsum dolor sit amet nonummy ibid lorem ipsum dolor sit amet, nonummy
adipiscing atet prosciutto. Lorem ipsum dolor sit amet nonummy ibid lorem ipsum dolor sit amet, nonummy adipiscing atet prosciutto.</p>
</div>
<div class="content">
<h2>one more box</h2>
<p>Everything we add to this page adds nicely boxed and centred material down the middle of the page. Lorem ipsum dolor sit amet nonummy ibid lorem ipsum dolor sit amet, nonummy adipiscing atet prosciutto.</p>
<p>Ain't CSS great?</p>
</div>
<div id="leftnav">
<h2>some links</h2>
<p><a href="#">fake link one</a></p>
<p><a href="#">also fake</a></p>
<p><a href="#">artificial</a></p>
<p><a href="#">goes nowhere</a></p>
<p><a href="#">big faker</a></p>
<h2>external links</h2>
<p><a href="http://www.google.ca">Google</a></p>
<p><a href="http://www.cbc.ca">CBC</a></p>
<p><a href="http://www.nfl.com">NFL</a></p>
</div>
<div id="rightnav">
<h2>why are you here?</h2>
<p>Why have you come to my site?</p>
<p>Perhaps you wish to know more about me.</p>
<p>Or more about CSS? Lorem ipsum dolor sit amet nonummy ibid lorem ipsum dolor sit amet, nonummy adipiscing atet prosciutto. Lorem ipsum dolor sit amet nonummy ibid lorem ipsum dolor sit amet, nonummy adipiscing atet prosciutto.</p>
<p>Go away.</p>
</div>