2 つの 100% 幅のインライン ブロック要素が重なるのはなぜですか?

幅 100% を使用すると 2 つのインライン ブロック要素が重複します

同じ幅の 2 つの隣り合った列を作成しようとしました、要素に display: inline-block を使用できます。ただし、これらの要素が累積して親の幅の 100% を占めると、予期しない問題が発生します。2 番目の列が新しい行に折り返されます。

なぜこれが起こるのですか?

この動作の理由は、インライン ブロック要素が空白を処理する方法にあります。デフォルトでは、インラインブロック要素は HTML コード内の空白文字を尊重します。要素間に改行やタブなどの大きな空白がある場合、要素はそれに応じて区切られます。

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

折り返しから 2 番目の列を削除するには、単に inline-block 要素の間の空白を削除します。これは、次のような HTML コードを 1 行使用することで実現できます。

<div>

空白が削除されると、インライン ブロック要素は宣言された幅に従い、並べられたままになります。

を最初の行に追加し、目的の動作を実現します。

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