0

これが私の問題を説明する画像です：

http://i.stack.imgur.com/8CP3C.png

完了時にパディングを考慮に入れる必要がありますwidth: 50%;。そうしないと、最初divの幅は実際に50% + 2emはパディングが考慮されていなかったためになります。

幅の計算でパディングをカウントするにはどうすればよいですか、または2つの同じサイズでパディングされたものを使用するための回避策はありdivますか？

フィドル： http： //jsfiddle.net/sMuCY/

テスト用のコード：

<div style="padding:1em;float:left;width:50%;background-color:#faa">
    This div has 50% width, 1em padding, float left
</div>
<div style="background-color:#0f0;padding:1em">
    This is a div with 1em padding
</div>

<hr>

<div style="float:left;width:50%;background-color:#faa">
    This div has 50% width and float left
</div>
<div style="background-color:#0f0">
    This is a normal div
</div>
4

1 に答える 1

5

プロパティを使用box-sizingして、ボックス モデルのデフォルトの動作を変更できます。

div {box-sizing: border-box;}

デモ

違いをテストする別のデモ: http://jsfiddle.net/sMuCY/2/

読書: http://css-tricks.com/box-sizing/

-moz-また、Firefox ではプレフィックスが必要であることに注意してください。IE は、8 番目のバージョンからこのプロパティをサポートしています。

于 2013-03-19T21:06:18.887 に答える