0

次の状況:
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-left は .element-right と対称に配置する必要がありますが、そうではありません。.element-left の場合、"auto" マージンはマイナスに評価され、"12%" マージンは正確に 12% に評価されます。.element-right の場合、"auto" マージンはゼロに評価され、"12%" マージンはマイナスに評価されます。

なぜこれが起こるのか、それを修正する方法はありますか? text-align は違いを生みます。

4

1 に答える 1

4

margin-valueは、auto常にゼロまたは正のピクセル数に評価されます。

.element-left の場合、「自動」マージンは負の値に評価されます

いいえ、 はmargin-rightゼロに評価されます。要素はその親をオーバーフローするだけで、overflowプロパティによって制御できます。デフォルトでは、要素は右と下にオーバーフローします。この動作は、テキストの方向をltrto rtl(右から左) に設定することで逆にすることができます。

内側の両方に相対位置を使用する方がよいと思いますDIV。別の可能な解決策は、 (eg )の代わりに固定の負の値を使用することauto-12%です。

于 2012-07-09T12:54:01.137 に答える