インラインブロック要素が幅 100% で折り返されるのに、99% では折り返されないのはなぜですか?

インライン ブロックの重なり: インライン ブロック要素によるジレンマ

HTML で 2 列レイアウトを実現しようとする場合、各列の幅が 50% に等しい場合、プロパティ 'display: inline-block' を使用することは、従来の float メソッドに代わる簡単な方法のように思えます。ただし、特定の条件下では、このアプローチは予期せぬ結果を招く可能性があります。

具体的には、インライン ブロックが全幅の 99% を消費すると、期待どおりに動作し、水平方向に並べて表示されます。ただし、合計幅が 100% に達すると、2 番目のインライン ブロックが予期せず次の行に折り返されます。

不一致の理由

この奇妙な動作は、次の事実に由来します。インライン ブロックは HTML から空白のプロパティを継承します。デフォルトでは、要素間に空白文字が存在し、インラインブロック要素は幅の計算でこのスペースを考慮します。したがって、空白を含む合計幅が正確に 100% の場合、2 番目のインライン ブロックは実際のコンテンツの幅を超え、次の行に折り返されます。

解決策: 空白を削除します。 -space

この問題を解決するには、inline-block 要素間の空白を削除する必要があります。これにより、幅属性の計算がより正確になり、2 番目のインライン ブロックがコンテンツの幅を超えて拡張されることがなくなります。

サンプル コード

解決策を説明するには次の HTML コードを考えてみましょう:

<div>

div 間の空白を削除することで、2 つのインライン ブロックの望ましい動作が実現します。全体の幅が 100% の場合でも、それぞれ 50% の幅以内で並べて表示します。

結論

空白スペースの影響についてinline-block 要素は CSS レイアウトにおいて重要です。このような要素間の不要な空白を排除することで、開発者は、特に両方の列の幅が等しい二重列レイアウトを作成するという課題に直面した場合に、インライン ブロックが期待どおりに動作することを保証できます。

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