0

2 つのブロックを別のブロック内に並べて配置しようとしていますが、なぜそれらがうまく隣り合っていないのか混乱しています。

.container {height: 200px; width: 400px; background:darkgrey;}
.left {height: 100%; width: 49.8%; margin: 0 0.2%; background:blue; float:left;}
.right {background:red; height:100%; width: 50%; float:left;}

マージンを 0.1% にすると機能しますが、右側に完全に整列しません。

なぜそれが機能しないのですか、何か不足していますか?

http://jsfiddle.net/hyZhU/

最新の Chrome を使用しています。

4

5 に答える 5

4

marginpadding幅に追加されます。

たとえば、 がある場合width: 100px; margin: 10px; padding: 15px;、要素の実際の幅は 150px になります。

あなたが持っているので、それは各要素の+パディングをwidth: 49.8%; margin: 0 0.2%;合計します。50.2%に幅を下げて49.6%指定しpadding: 0ました。フィドル: http://jsfiddle.net/hyZhU/4/

于 2013-07-09T18:54:00.980 に答える
2

.02%マージンは両側 (左右) に適用されるため、最初のブロックの実際の合計幅はです50.2%。.01%代わりに余白に使用してください。

http://jsfiddle.net/ExplosionPIlls/hyZhU/1/

于 2013-07-09T18:55:26.947 に答える
1

2 つの値を使用してmarginプロパティを設定すると、上マージンと下マージンの両方が最初の値に等しく設定され、次に左マージンと右マージンが 2 番目の値に等しく設定されます。このため、左のボックスは 0.2% (左マージン) + 49.8% (実際の幅) + 0.2% (右マージン) に相当するスペースを占有し、合計すると 50.2% になります。これにより、2 番目のボックスが新しい行にプッシュされます。

于 2013-07-09T19:00:29.873 に答える
0

これはうまくいくはずです、、

.container {height: 200px; width: 400px; background:darkgrey;}
    .left {height: 100%; width: 45%; margin: 0 0.2%; background:blue; float:left;}
    .right {background:red; height:100%; width: 45%; float:right;}

アップデート

.container {height: 200px; width: 400px; background:darkgrey;}
    .left {height: 100%; width: 199px; margin: 0 1px; background:blue; float:left;}
    .right {background:red; height:100%; width: 199px; float:right;}
于 2013-07-09T18:56:21.370 に答える
0

ブラウザーはパーセンテージをピクセルに変換する必要があり、ブラウザーによってパーセンテージの加算方法が異なります。したがって、現在の幅の 49.8% は、あるブラウザーでは 201 ピクセルに切り上げられ、別のブラウザーでは 199 ピクセルに切り下げられる可能性があります。

つまり、ピクセルに調整された後、ブラウザーは 100% を超えるコンテンツをスペースに収めようとする可能性があり、これが折り返しの原因になります。

これを回避する最善の方法は、より長いパーセンテージ値を使用して丸めを最小限に抑えるか、border-box ( http://www.paulirish.com/2012/box-sizing-border-box-ftw/ )を組み合わせることです。解決策も。

例: 33.3333333% は 33.3% よりも優れています。

于 2013-07-09T18:59:04.307 に答える