☰

2 つのインライン ブロック、幅 50% の要素が 2 行目に折り返されます [重複] 質問する

tag-icon • tag-icon html css
2 つのインライン ブロック、幅 50% の要素が 2 行目に折り返されます [重複] 質問する

50% 幅のスペースを 2 列にし、フロートを避けたいです。そこで、 を使用することを考えましたdisplay:inline-block。

要素の合計が99%の幅（例：50%、49%、http://jsfiddle.net/XCDsu/2/) 期待通りに動作します。

100%の幅（例：50%、50%、http://jsfiddle.net/XCDsu/3/) 2 番目の列は 2 行目に分割されます。

何故ですか？

ベストアンサー1

これは、HTML 内の空白スペースが考慮されるためですdisplay:inline-block。 's 間の空白スペースを削除すると、div期待どおりに動作します。ライブ例:http://jsfiddle.net/XCDsu/4/

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

おすすめ記事