インラインブロックを使用して別の親 Div 内で子 Div を並べて配置するにはどうすればよいですか?

ネストされていない親 Div 内で子 Div を並べて配置する方法

2 つの div が並べてあり、それぞれがその中にあります。自身の親 div。これらの親 div は複数回繰り返されます。 child_div_1 と child_div_2 の各ペアを水平方向に隣り合わせて配置したいと考えています。

これを実現するには、display:inline-block; を使用します。子 div の style プロパティ。このプロパティにより、コンテンツの通常の流れを中断することなく、div をインライン要素として整列させることができます。 div は並べて表示されますが、ブロック要素としてのステータスは保持されます。

このメソッドは、float を使用する場合と比較して、目的のレイアウトを実現する簡単な方法を提供します。変更された HTML と CSS の例を次に示します。

<code class="html"><div id='parent_div_1'>
  <div class='child_div_1' style="display:inline-block;"></div>
  <div class='child_div_2' style="display:inline-block;"></div>
</div></code>

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

さらに詳しいガイダンスについては、次のチュートリアルを参照してください: http://learnlayout.com/inline-block.html

以上がインラインブロックを使用して別の親 Div 内で子 Div を並べて配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。