幅 50% の 2 つのインラインブロック要素が次の行に折り返されるのはなぜですか?

幅 50% の 2 つのインラインブロック要素が 2 行目に分割

display:inline-block を使用して幅が 50% 等しい 2 つの列を作成しようとすると、要素の合計幅が 99% を超えると、2 番目の列が次の行に折り返されることがわかりました。この動作は直感に反するように思えるかもしれません。

問題を理解する

この動作の理由は、display:inline-block が HTML 内の空白と対話する方法にあります。改行、タブ、スペースなどの空白は、display:inline-block によって折りたたまれます。これは、インライン ブロック要素の間に空白がある場合、それが単一のスペースとして扱われ、要素が効果的に隣り合って配置されることを意味します。

インライン ブロック要素の合計幅が 100 を超える場合%、空白を収容できる残りのスペースがありません。その結果、2 番目の列は強制的に次の行に折り返されます。

解決策: 空白の削除

この問題を解決するには、インライン ブロック要素間の空白を削除する必要があります。 。これは、次の HTML コードを使用して実現できます。

<div>

空白を入れずに div を連結することにより、display:inline-block 要素は効果的に、間にスペースを入れずに並べて配置されます。これにより、コンテナの幅内で正しく折り返されるようになります。

この調整により、2 つのインライン ブロック要素は 50% の幅を維持し、合計幅が 100% を超えた場合でも 2 行目に折り返されません。 .

以上が幅 50% の 2 つのインラインブロック要素が次の行に折り返されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。