Html 使用浏览器缩小时，带边框的2列布局将折叠

因此，我有一个2列布局，其结构如下：

html结构：

#container
  #content
  #side-a
  .janitor

css:

---

当没有边框时，一切正常，但当我添加边框时，版面会在缩小时折叠。

这是因为边框宽度已添加到指定的内容宽度

#content

是300px，

#side-a

是200px——总共是500px<代码>#容器为501px。没有border的，你还剩下1px，但是

添加边框，即使是1px，也会使

#content

300px+2px宽，

#side-a

200px+2px宽。我很惊讶它在放大时没有倒塌

您可以使用以下方法解决此问题：

box-sizing: border-box;

---

（带有适当的供应商前缀）。

理想解决方案：此类型的列布局不使用浮动。无论如何，您使用的是一个固定大小的501px容器；因此，不需要动态浮动：只需显式指定位置——也就是说，假设高度定义良好。或者——是的，真的——使用一个表（或者css的display:table，如果您喜欢语义纯度的话），它以一种自然的方式实现列

---

至于你问题的细节：你有1px的边框和200px+300px的内容，加起来似乎是501px，也就是说，它应该是合适的。然而，浏览器不能以任意精度计算宽度；它们四舍五入到某种内部精度——特别是在缩放时，这种精度很可能与设备像素有关，而不是CSS像素：如果四舍五入引入了一点抖动，那么1+200+300的总和很可能略大于或略小于501，从而导致布局意外地不再适合501px容器。这就是为什么您可能永远不应该使用这种样式的CSS编码——它非常特定于设备和浏览器，并且可能会由于一些小的更改而在没有警告的情况下中断。我敢打赌，在所有浏览器中放大时，你的布局都不会被破坏…

他只对了一个边框，所以他的css理论上确实达到了501px。@Eamon:我的阅读能力正在下降。你相信我完全错过了边境申报吗？o_OIt其实并不重要：在本例中，您引入的额外像素显然足以克服任何不准确之处（我几乎总是这样做）。因此，即使您的动机有点混乱，解决方案也相当可靠：-）。+1。看到我错过了边界声明，您提供的关于浏览器无法正确计算像素完美宽度的解释最终证明是正确的答案：D。

box-sizing: border-box;