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

有两种方法可以获得所需的结果：

在内容前放右栏在html中，删除宽度内容并赋予其权利相反的边距（右边的宽度）吧+额外的东西）
将右侧杆完全放在右侧，从中移除宽度内容并赋予其权利相反的边缘（见数字1）。

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

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

一旦调整太小，百分比宽度将小于元素中的文本内容。浏览器无法连接单词，因此该元素被强制为具有最小宽度。尝试将元素放在具有指定最小宽度的包装器中。
在这两个栏之间，你有3％的空间。 1000px的3％是30px。 2000px的3％是60px。因此，如果右边的元素是向右浮动的，那么你会看到额外的空间。尝试向左浮动元素。

HTML：浮动左右分辨率/调整大小问题％

2 个答案: