2

私はこのコードを使用します

<div class="main">
<div class="babyOne">
</div>
<div class="babyTwo">
</div>
</div>

.main{
width:100%;
position:relative;
}
.babyOne,.badyTwo{
width:50%;
float:left;
}

上記のこの CSS を使用すると、すべて正常に動作します。

しかし、内側の div にパディングを与えるとすぐに、すべての UI が壊れます。

.babyOne,.badyTwo{
width:50%;
float:left;
padding:5px;
}

火災のバグは、パディングに等しい div の幅の増加を示しています。パディング プロパティによると、これは発生しないはずです。これを防ぐ方法はありますか？

4

5 に答える 5

3

まず、CSSを学ぶ必要がありますbox-model

ここに画像の説明を入力してください

これは、要素に追加したものはすべてその外でカウントされることを示しています。たとえばpadding, border, margin、要素はとで200px widthあり、と100px heightを追加すると、それぞれとになります。これを回避するには、CSS3プロパティを使用する必要がありますが、それでもそれはプロパティであり、IEがサポートしたい主なものである場合は、必要に応じて要素のサイズを変更することをお勧めしますpadding5pxwidthheight205px105pxbox-sizingCSS3

たとえば、これらのスタイルのdiv

div {
   height: 100px;
   width: 200px;
   padding: 5px;
}

上記のサイズを次のように変更できます

div {
   height: 95px;
   width: 195px;
   padding: 5px;
}

CSS3box-sizing リファレンス

于 2013-01-05T08:54:57.450 に答える
1

WRAPPER は固定サイズでなければなりません: http://jsfiddle.net/esVgH/1例:

.main{
   width:200px;
   position:relative;
}
于 2013-01-05T08:42:05.897 に答える
0

.babyOne、.badyTwo {

幅：45％; /*パディングに基づいて好きなように*/

float：left;

パディング：5px;

}

于 2013-01-05T08:50:34.173 に答える
0

あなたの問題は、期待される動作です。
幅を設定してから、パディングを与えると言います。
したがって、幅にパディングを加えたものは、元の幅よりも大きくなります。

CSS3sbox-sizing属性を試すことができます: http://www.quirksmode.org/css/box.html

ただし、それがどれほど広くサポートされているかはわかりません。

SO の回答も多数あります: How apply padding in HTML without increase the div size?

于 2013-01-05T08:40:32.737 に答える
0

別の解決策は、.baby を表のセルとして表示することです。

.babyOne, .badyTwo {
   display: table-cell;
}
于 2013-01-05T08:44:53.800 に答える