4

所以我有一个 2 列布局，其结构如下：

html结构：

#container
  #content
  #side-a
  .janitor

CSS：

#container{ width: 501px; }
#content { 
  float: left; 
  width: 300px;  
  border-right: 1px solid black;
}
#side-a{
  float: right;
  width: 200px;
}
.janitor {clear: both; }

当没有边框时一切都很好，但是当我添加它时，布局会在缩小时崩溃。

4

2 回答 2

4

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

#content是 300px，#side-a是 200px - 总共是 500px。#container是 501 像素。没有边框，你还剩下 1px，但是......

添加一个边框，即使是 1px，也会使#content300px + 2px 宽，#side-a200px + 2px 宽。我很惊讶它在放大时不会塌陷。

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

box-sizing: border-box;

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

于 2011-01-25T13:39:34.247 回答
3

理想的解决方案：不要对这种类型的列布局使用浮动。无论如何，您正在使用 501px 的固定大小的容器；所以不需要动态浮动：只需明确指定位置 - 也就是说，假设高度定义明确。或者 - 是的，真的 - 使用以自然方式实现列的表格（或 css 的 display: table，如果你喜欢语义纯度）。

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

于 2011-01-25T14:19:21.353 回答