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

インラインブロック要素の折り返し: 幅の問題

各列の幅が 50% の 2 列レイアウトを作成する場合、多くの人が選択します。ディスプレイの場合: float に関する潜在的な問題を回避するためのインラインブロックアプローチ。ただし、両方の列に 100% の幅を使用すると、不可解なシナリオが生じます。 2 列目は 2 行目に改行されているようです。

根本的な原因

この動作の原因は、HTML が display: inline で空白文字を考慮していることにあります。 -ブロック。スペース文字が 2 つの div 要素を区切ると、ブラウザはこのスペースを追加の幅として解釈し、2 番目の列が折り返されます。

解決策

この問題を解決するには、 div 要素間の空白文字を削除します。これにより、余分なスペースを追加することなく、結合された幅の計算が正確になります。調整された HTML は次のようになります。

<div>

この簡単な変更により、2 つの列が 100% の幅を占め、同じ行に並んだままになります。

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