html - 缩小时如何阻止 div 在彼此下方移动

Question

我有以下 HTML 代码来创建垂直导航栏:

<div id="nav">
  <ul>
    <li><a>Hello</a></li>
    <li><a>Hello</a></li>
    <li><a>Hello</a></li>
    <li><a>Hello</a></li>
    <li><a>Hello</a></li>
  </ul>
</div>
<div id="stream">
  <p>Hello</p>
</div>

和CSS:

body {
  font-family: Helvetica;
  color: #FFF;
  width: 960px;
  margin: auto;
  background-color: #CCC;
}

#nav {
  width: 239px;
  padding-top: 40px;
  float: left;
}
#nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
}

#nav ul li a {
  border: 1px solid #000;
  border-bottom: none;
  border-right: none;
  padding: 10px 0 10px 20px;
  text-decoration: none;
  background: #1A6680;
  color: #FFF;
  display: block;
}

#stream {
  text-align: center;
  border: 1px solid #000;
  width: 719px;
  height: 550px;
  background: #007A5C;
  float: right;
}

虽然这通常可以正常工作，但如果缩小，#nav 会位于 #stream 之上，而不是并排。如何确保 #nav 和 #stream div 保持并排接触？

Answer 1

在浏览器中“缩小”时，浏览器会尝试补偿边框。您已将边框设置为 1 像素，但在 50% 缩放时，边框实际上呈现为 2 像素的宽度。

这样做的原因是，当浏览器减小它显示的元素的大小时，它会尝试对边框执行此操作。但是由于您只指定了 1 像素宽度的边框，它会首先计算小于 1 的宽度。由于您无法显示像素的一部分，因此浏览器会尝试进行补偿。

但是它会过度补偿原始值并将其与缩放比例相乘。所以在 50% 时，边界计算在 ​​

1 * 0.5

这将返回 1.5 并放大到 2。

所以，这个问题会有几个解决方案。

1. 您可以将框和边框的宽度调整为补偿浏览器将进行的任何修改。
2. 您可以按照 Fahad 的建议使用百分比宽度使页面响应。

3. 或者您可以使用 CSS3 的 box-sizing 属性(如果您不太关心回退到旧浏览器)；

   #stream {
       text-align: center;
       border: 1px solid #000;
      -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
       width: 719px;
       height: 550px;
       background: #007A5C;
       float: right;
   }
   

   取自Sunny's Answer

我敢肯定还有其他解决方案，但我相信这是您最好的三个选择。