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

我有两个主div的布局。每个div的宽度是45％。然而，当我检查不同页面宽度的div时，div通常是一个不同的像素。 639对640.我并不关心这个问题，唯一的问题是更小的div内的物品不能与其他物品正确对齐。它只发生在某些页面宽度，但它被打破了，而不是正确的。看起来较大的div中的元素排列在任何窗口大小上，较小的div几乎总是错误的，但在某些大小上是正确的。使用基于百分比的布局时奇怪的数学

这里发生了什么，有没有办法强制小型股份公司像大型股份公司一样行事？

来源

2012-08-23 Lumpy

JSFiddle请。 – luqmaan

通常这是由于边距，填充，边框或CSS样式的其他部分（以及特定于浏览器的默认值）导致的差异。你应该尝试使用CSS重置。 –

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

I've asked a similar question a while back发现当涉及到百分比时，基于webkit的浏览器有一个四舍五入的问题。

Here's the link bookcasey与我分享回答我的问题。

来源

2012-08-23 17:36:31

参见http://ejohn.org/blog/sub-pixel-problems-in-css/。它是从2008年开始的，但是很长时间以来，百分比宽度一直存在问题。 –

^他说什么:) –

伟大的资源，是否有一个公认的修复？可能只允许某些尺寸很好地分开？ – Lumpy

不要使用百分比，如果你这样做，确保总宽度增加到100％以下。使用100％时，我总是遇到溢出和错位问题。

我假设你有另一个div占剩下的10％。所以，两者都可能尝试44％。

来源

2012-08-23 17:28:17 luqmaan

溢出是由边距，填充和某些浏览器边框厚度引起的。 –

我试过这个，但divs已经小于整个页面，缩小百分比并没有帮助。 – Lumpy

@Lumpy JS小提琴请。 – luqmaan

宽度必须为整数。

什么是955的45％？ 429.75px。不能有。所以他们中的一个必须比另一个更宽。

来源

2012-08-23 17:31:53 sachleen

但是为什么一个人将429.75转换为429，另一个转换为430.解决方法是什么？我应该强制我的内容div被2 – Lumpy

整除吗？因为这是唯一可以获得90％总分的方法。我的例子可能无法正常工作，因为90％的事情发生了一半，所以还有一些猜测。 – sachleen

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

回答

相关问题