保證金左：汽車不能爲負，但保證金權：汽車可以

以下情況：
http://files.dqxtech.net/leftmargin/
http://jsfiddle.net/xeFN3/保證金左：汽車不能爲負，但保證金權：汽車可以

<div class="container"> 
    <div class="element-left"> 
    </div> 
    <div class="element-right"> 
    </div> 
</div>

與

.container { 
    width:120px; 
} 
.element-left { 
    width:120px; 
    margin-left:12%: 
    margin-right:auto; 
} 
.element-right { 
    width:120px; 
    margin-right:12%: 
    margin-left:auto; 
}

問題：
的。元素左側應該與.element右側對稱，但事實並非如此。對於.element-left，「自動」保證金評估爲負值，「12％」保證金評估值爲12％。對於.element-right，「自動」邊距評估爲零，「12％」邊距評估爲負值。

任何想法爲什麼發生這種情況，以及如何解決它？ text-align確實有所幫助。

來源

2012-07-09 donquixote

我意識到，我可以將元素作爲可能的解決方案進行浮動。但這並不能解釋不對稱行爲。 – donquixote 2012-07-09 12:20:41

而且，我應該提到，我在Ubuntu上使用Chromium，Firefox和Opera嘗試了這些內容。 – donquixote 2012-07-09 12:21:41

我也可以使容器更大，但是然後12％會在px中產生不同的結果。 – donquixote 2012-07-09 12:23:32

margin - 值auto始終計算爲零或正像素數。

對於.element左，「自動」保證金計算結果爲負面的東西

沒有，margin-right計算結果爲零;元素只是溢出了它的父元素，這可以通過overflow屬性來控制。元素默認溢出到右側和底部。通過將文本方向從ltr設置爲rtl（從右到左），可以逆轉此行爲。

我想，你會更好地使用內部DIV的相對位置。另一個可能的解決方案是use fixed negative value instead of auto (e.g. -12%)。

來源

2012-07-09 12:54:01 feeela

好的，rtl/ltr解釋了不對稱行爲！非常感謝。 – donquixote 2012-07-09 12:56:22

嗯。你提到的兩種解決方案並沒有完全達到預期的結果。我希望在「狹窄」和「最窄」的容器中都有12％的保證金。這意味着，沒有可靠的餘裕值。而位置相對也不會削減它。我想方向：rtl;實際上會做我想要的。它對我來說感覺有點骯髒，用它來達到這個目的。 – donquixote 2012-07-09 13:04:59

「它只是覺得有點骯髒[...]」這是！ – feeela 2012-07-09 13:12:45

保證金左：汽車不能爲負，但保證金權：汽車可以

回答

相關問題