CSS：缩放更改时两列Div布局不对齐

请参阅jsFiddle http://jsfiddle.net/Lijo/ryDnn/1/。我有两列布局。它是基于％的布局 - 但有最小宽度定义。当我将浏览器IE8的缩放比例设置为75％或更低时，效果很好。当我将缩放比例设置为85％时，橙色框落下。我们如何克服这种错位？橙箱应保持在正确的位置（如图中所示），与放大/浏览器最小化/桌面分辨率无关。它不应该下去。在的jsfiddleCSS：缩放更改时两列Div布局不对齐

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

而且，这将是巨大的，如果你能解释一下它背后的CSS理论。

注意：即使浏览器最小化，也会观察到这种偏差。

注意：当测试此项时，我的桌面在1024到768之间配置。

即使从leftNavContainer和主容器中删除边距后，问题仍然存在。请参阅http://jsfiddle.net/Lijo/ryDnn/10/

enter image description here

来源

2012-04-13 Lijo

你太多的容器，你到底想要的结果呢？ – 2012-04-13 13:05:29

@TomWijsman感谢您关注此事。在橙箱中，将添加更多内容。内容因不同页面而异;但纲要保持不变。与变焦无关，橙箱应保持在正确的位置（如图中所示）。 – Lijo 2012-04-13 13:08:15

要允许舍入误差，采取的百分比。 15%左侧和84%应该工作。

但是，问题是，您也在边界也加入，这显然不会很好。

考虑先得到两个div使用15%和84%（或85%如果它工作），然后使用这些两个div在你把你给右边距一个div包装。这样，您的利润率不会干扰width的计算。

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

有疑问时，可使用页/ Web检查广泛获得拳击模型的想法...

来源

2012-04-13 13:11:32

请注意，边界也必须考虑在内。请参阅W3C对盒子模型的解释：http://www.w3.org/TR/CSS2/box。html – Javaguru 2012-04-13 13:18:10

感谢您的关注。我删除了利润。问题仍然在http://jsfiddle.net/Lijo/ryDnn/10/？你有工作吗？ – Lijo 2012-04-13 23:41:28

@Lijo：这次''min-width'正在烦扰你，为我禁用这些作品。 – 2012-04-14 01:49:26

您的总宽度为100％leftNavContainer采取宽度为25％，因为与容限左10px的宽度和15％，mainContainer上也一样

如果你是给保证金的手段降低宽度与保证金规模

mainContainer上的CSS

 #mainContainer { 

        width:75%; //(or) reduce your margin 
         }

或

 #leftNavContainer { 

        width:15%; //(or) reduce your margin 
        margin:5px; 
         }

来源

2012-04-13 14:22:46 srini

你不能这样做，因为利润率是固定的，没有*保证* ... – 2012-04-13 14:34:19

你的答案是左边的15％和84％。工作如何让我看看例子 – srini 2012-04-13 16:15:28

你还没有看过我的答案，只有第一句话。 – 2012-04-13 16:28:00

CSS：缩放更改时两列Div布局不对齐

回答

相关问题