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. 将右栏绝对定位在右侧，从 内容并赋予其权利 改用边距（参见第 1 点。）

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

编辑：重新阅读您的问题后，我认为在内容部分使用溢出：隐藏（使其成为一个漂亮的方块），您可以将其与 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>

Answer 2

1. 一旦您将尺寸调整得太小，百分比宽度将小于元素中的文本内容。浏览器不能连接单词，所以元素必须有一个最小宽度。尝试将元素放入指定最小宽度的包装器中。

2. 在这两个条之间有 3% 的空间。 1000px 的 3% 是 30px。 2000px 的 3% 是 60px。因此，如果您的右元素向右浮动，那么您会看到额外的空间是有道理的。尝试向左浮动元素。