css - ラッパーの幅が 50% の 2 列に収まりません

Question

幅 960px のページ ラッパーを設定しました。ラッパーの幅を埋めるために 2 つのブロックを作成したので、別のブロックの幅を 50% に設定しましたが、2 つのブロックがラッパーに左右に収まりません。

別のブロックの1pxの実線に関係していると思います。1px ボーダーのブロックは、全周 50% 幅 + 1px ボーダーになるということですか?

1px 境界線を削除せずにこの問題を解決するにはどうすればよいですか?

Answer 1

IE7 をサポートする必要がない場合は、次を使用する必要があります。

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

このボックス モデルは、幅の外側ではなく内側に境界線とパディングを追加します。

詳細については、css-tricks.com にすばらしい記事があります。

Answer 2

その場合、パーセントを使用しないでください。div と 1px の境界線の両方で 476px の幅を使用します。使用することもできますmargin: -1px;

Answer 3

正しい答えは次のとおりです。

これは、display:inline-block が html の空白を考慮しているためです。div 間の空白を削除すると、期待どおりに機能します。実際の例: http://jsfiddle.net/XCDsu/4/

<div id="col1">content</div><div id="col2">content</div>

ただし、コードをクリーンで読みやすい状態に保ちたい場合 (少なくとも開発モードでは)、空白を使用して css を介して空白を削除できるため、きれいな HTML レイアウトを維持できます。テキストを列の内側で折り返す場合は、空白を再び通常の設定に戻すことを忘れないでください。

.container { white-space: nowrap; }
.column { display: inline-block; width: 50%; white-space: normal; }

<div class="container">
  <div class="column">text that can wrap</div>
  <div class="column">text that can wrap</div>
</div>

ソース: https://stackoverflow.com/a/6872020/2208466およびhttps://stackoverflow.com/a/10592283/2208466