[解決済み] 2つのinline-block、幅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行目まで改行されます。

なぜでしょうか？

どうすれば解決するの？

それは display:inline-block は、htmlのホワイトスペースを考慮しています。の間の空白を取り除くと div は期待通りに動作します。実際の例 http://jsfiddle.net/XCDsu/4/

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