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佈局不對齊

回答

相關問題