CSS：缩放更改时，两列Div布局不对齐 [英] CSS: Two column Div layout misaligns when Zoom changes

问题描述

请参阅jsFiddle http://jsfiddle.net/Lijo/ryDnn/1/。我有两列布局。它是基于％的布局 - 但是已定义最小宽度。当我使（浏览器IE8）的缩放为75％或更低，它工作得很好。当我将缩放为85％时，橙色框下降。我们如何克服这种不对准？橙色框应保持在正确的位置（如图所示），而不考虑缩放/浏览器最小化/桌面分辨率。

Please see the jsFiddle http://jsfiddle.net/Lijo/ryDnn/1/ . I have two columns layout. It is % based layout – but there is minimum width defined. When I make the zoom (of browser IE8) as 75 % or below, it works well. When I make the zoom as 85%, the orange box goes down. How can we overcome this misalignment? The Orange Box should remain in the correct postion (as shown in the image) irrepective of the zoom/browser minimize/desktop resolution. It should not go down.

jsFiddle中的结果窗口： http://jsfiddle.net/Lijo/ryDnn/1/embedded/result/

Result window in jsFiddle: http://jsfiddle.net/Lijo/ryDnn/1/embedded/result/

此外，

注意：即使浏览器被最小化，也会观察到这种不一致。

Note: Such misalignment is observed even when the browser is minimized.

注意：测试此桌面时，我的桌面配置为1024 x 768。

Note: My desktop was configured in 1024 by 768 when this is tested.

即使将边距leftNavContainer和主容器，问题就在那里。请参阅 http://jsfiddle.net/Lijo/ryDnn/10/

Even after removing the margins from leftNavContainer and main container, the issue is there. Please see http://jsfiddle.net/Lijo/ryDnn/10/

>

推荐答案

允许舍入错误，取百分比。 15％为左， 84％应该有效。

To allow for rounding errors, take of a percent. 15% for left and 84% should work.

但是，问题是，您还要添加边距，这显然不会很好。使用 15％和 84％（或 85％如果它工作），然后使用那两个div作为包装，你放一个div，你给正确的边距。这样，您的利润就不会影响 width 的计算。

Consider to first get two divs to use 15% and 84% (or 85% if it works), and then use those two divs as wrappers in which you put a div which you give the right margins. That way, your margins aren't interfering with the width calculations.

换句话说，不是div宽度的一部分。

In other words, margins aren't part of the div's width.

如有疑问，请广泛使用Page / Web Inspector以了解拳击模型...

When in doubt, use a Page/Web Inspector extensively to get an idea of the boxing models...

这篇关于CSS：缩放更改时，两列Div布局不对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！