html - 使用基于百分比的布局时的奇怪数学

Question

我有一个包含两个主要 div 的布局。每个 div 的宽度为 45%。然而，当我检查不同页面宽度的 div 时，这些 div 通常彼此不同一个像素。639 vs 640。我并不关心这个，唯一的问题是较小的 div 内的项目没有与其他项目正确对齐。它只发生在某些页面宽度上，但它被破坏的程度超过了正确的程度。似乎较大 div 中的元素在任何窗口大小下都排成一行，而较小 div 几乎总是错误的，但在某些尺寸下是正确的。

这里发生了什么，有没有办法强制较小的 div 像较大的 div 一样？

Answer 1

宽度必须是整数。

955 的 45% 是多少？429.75px. 不能这样。所以其中一个必须比另一个宽。

Answer 2

这是一个错误/亚像素问题。

不久前我问过一个类似的问题，发现基于 webkit 的浏览器在百分比方面存在舍入问题。

这是 bookcasey 与我共享以回答我的问题的链接。

Answer 3

不要使用百分比，如果使用，请确保总宽度增加至略低于 100%。使用 100% 时，我总是遇到溢出和错位问题。

我假设你有另一个 div 占据了剩余的 10%。所以，也许两者都尝试 44%。