HTML:左右浮动分辨率/调整大小问题 %

Question

调整窗口大小时，我遇到以下 HTML 问题；

1: 当宽度调整得太小时，右栏突然下降。

2:随着宽度变大，内容和右侧栏之间的间距也变大。

<style type="text/css">

#content {
  width: 80%;
  float: left;
  height: 500px;
  border:2px solid #00ff00;
}

#rightbar {
  max-width: 200px;
  width: 17%;
  float: right;
  border:2px solid #ff0000;
}

#rightbar a {
  display: block;
  padding: 5px;
  background-color: #F0F4FF;
  margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>

<div id="content">contents</div>
<div id="rightbar">
  <a href="#">link 1</a>
  <a href="#">link 2</a>
  <a href="#">link 3</a>
</div>

Answer 1

有两种方法可以得到你想要的结果:

1. 在内容之前放置右栏在 html 中，删除宽度内容并赋予其权利边距代替(右边的宽度酒吧+额外的东西)
2. 将右边的栏绝对放在右边，去掉宽度内容并赋予其权利而不是 margin (见数字 1。)

顺便说一句，问题在于您混合了绝对宽度和相对宽度，而您看到的正是您应该看到的。

编辑:重新阅读您的问题后，我认为在内容部分使用 overflow:hidden(使其成为一个漂亮的方 block )，您可以将其与 1 结合使用。没有边距:

<style type="text/css">

#content {
  overflow: hidden;
  height: 500px;
  border:2px solid #00ff00;
}

#rightbar {
  max-width: 200px;
  width: 17%;
  float: right;
  border:2px solid #ff0000;
}

#rightbar a {
  display: block;
  padding: 5px;
  background-color: #F0F4FF;
  margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>

<div id="rightbar">
  <a href="#">link 1</a>
  <a href="#">link 2</a>
  <a href="#">link 3</a>
</div>
<!-- content needs to be placed after rightbar -->
<div id="content">contents</div>