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

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

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

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

.child_div_1, .child_div_2 {
  display:inline-block;
}

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