ネストせずに div を並べて表示するにはどうすればよいですか?

Div の並べて表示を実現する

水平方向に隣接して表示される複数の div 要素を扱うとき、特にそれらがネストされていない場合、共通の課題が発生します。お互いの中で。このような場合、それらを並べるのは難しい場合があります。

問題ステートメント:

次の HTML 構造を考慮してください:

<code class="html"><div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div></code>

目標は、child_div_1 要素と child_div_2 要素の各ペアを並べて表示することです。

解決策:

これを達成するには、「inline-block」の概念が必要です。が登場します。デフォルトでは、div 要素はブロック要素です。つまり、利用可能な幅全体を占めます。ただし、表示プロパティを inline-block に設定すると、ブロック要素として扱われながら、要素の流れを中断することなく div をインラインでレンダリングできます。

<code class="css">.child_div_1, .child_div_2 {
  display: inline-block;
}</code>

この変更により、子 div はインラインでレンダリングされます。 、幅全体を拡張せずにスペースを占有します。これにより、それぞれの親 div 内で並べて表示できます。

以上がネストせずに div を並べて表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。