この記事では、前述の各アプローチについて 1 つずつ説明し、各方法の適切な例を示します。
それでは、始めましょう！
方法 1: グリッドを使用して CSS で 2 つの Div を並べて配置する
CSS「 グリッド 」 レイアウトにより、ユーザーは 2 つ以上の div を並べて配置できます。基本的に、グリッドは、行と列で構成されるレイアウトを作成するために使用される表示プロパティの値です。
構文
グリッド レイアウトの表示プロパティの構文は次のとおりです。
表示: グリッド
それでは、グリッド レイアウトを使用して、CSS で 2 つの div を並べて配置することに関連する例を見てみましょう。
例
ここでは、親 div 内に 2 つの子 div を作成し、クラス名を「 親 」、「 子 ' と ' 子 」：
< 分周 クラス = '親' >< 分周 クラス = '子' >< / 分周 >
< 分周 クラス = '子' >< / 分周 >
< / 分周 >
次に CSS セクションで、「 。親 」を使用して親 div にアクセスし、表示プロパティの値を「 グリッド 」。次に、「 グリッド テンプレート列 」プロパティを使用して、列のスペースを作成します。私たちの場合、分数を「 1fr ' と ' 1fr 」、これは、両方の div が等しいスペースを獲得したことを意味します。さらに、column-gap プロパティを使用して 2 つの列間のギャップを設定し、その値を「 25px 」。
CSS:
。親 {画面 : グリッド ;
グリッド テンプレート列 : 1fr 1fr ;
列の隙間 : 25px ;
}
次のステップでは、「 。子 」 両方の子 div にアクセスし、div の高さを「 250px 」とし、背景色を「 RGB(253, 5, 109) 」：
。子 {身長 : 250px ;
バックグラウンド : RGB ( 253 、 5 、 109 ) ;
}
これにより、次の結果が表示されます。
divを並べて配置する別の方法に移りましょう
方法 2: flex を使用して CSS に 2 つの Div を並べて配置する
「 フレックス 」は、2 つの div を並べて配置できる表示プロパティの値です。このプロパティは、柔軟なアイテムの柔軟な長さを設定するために使用されます。コンテナに収まるようにフレックスアイテムを縮小または拡大します。
構文
flex を使用した表示プロパティの構文は次のとおりです。
表示: フレックス;記載されている概念を理解するために、例に移りましょう。
例
同じ HTML ファイルを検討し、「 フレックス 」を親コンテナに。ここでは、display プロパティの値を flex に設定し、子 div 間のギャップを「 10px 」：
。親 {画面 : フレックス ;
ギャップ : 10px ;
}
その後、divの幅、高さ、背景色を「 650px 」、「 200px '、 と 「rgb(0, 255, 42) '、 それぞれ：
。子 {幅 : 650px ;
身長 : 200px ;
バックグラウンド : RGB ( 0 、 255 、 42 ) ;
}
指定されたコードの結果を以下に示します。
方法 3: float を使用して CSS で 2 つの Div を並べて配置する
CSS の float プロパティは、要素の浮動方向を指定します。具体的には、このプロパティを使用して、CSS で 2 つの div を並べて配置できます。
構文
float プロパティの構文は次のとおりです。
float: なし|左|右上記の値の説明は次のとおりです。
- なし： 浮きを制限するために使用します。
- 左： 左側の要素をフロートするために使用されます。
- 右： 右側の要素をフロートさせるために使用されます。
divを並べて配置する例に移りましょう。
例
ここで、
タグ内に 2 つの div を作成し、クラス名を「 div1 ' と ' div2 」： < 体 >< 分周 クラス = 「div1」 >< / 分周 >
< 分周 クラス = 「div2」 >< / 分周 >
< / 体 >
次に、「 .div1 ' と ' .div2 」を使用して、HTML セクションに追加されたコンテナーにアクセスします。両方に割り当てるプロパティと値が同じであるため、同じクラスで両方の div を使用します。
次に、float プロパティの値を「 左 」、div の幅と高さを「 50% ' と ' 40% 」。また、box-sizing プロパティを使用し、その値を「 ボーダーボックス 」。さらに、divの背景色を「 RGB(7, 255, 222) 」と設定し、ボーダープロパティの値を「 3px 」、「 個体 '、 と ' RGB(255, 0, 255) 」：
.div1 、 .div2 {浮く : 左 ;
幅 : 50% ;
身長 : 40% ;
ボックスサイズ : ボーダーボックス ;
バックグラウンド : RGB ( 7 、 255 、 222 ) ;
国境 : 3px 個体 RGB ( 255 、 0 、 255 ) ;
}
ノート： div の異なる背景色を設定することで、box-sizing プロパティと border プロパティを使用せずに 2 つの div を並べて配置できます。
上記のコードを実装したら、HTML ファイルを実行して結果を確認します。
ノート： 2 つの div の間にギャップを作成するには、まず別の div を作成し、それに応じて div のマージンを設定します。
結論
div は、CSS の 3 つの異なる方法を使用して並べて配置できます。 フレックス ' と ' グリッド 」表示プロパティの値と「 浮く ' 財産。それぞれの方法は効率的に機能します。ただし、要件に応じてそれらのいずれかを使用できます。このガイドでは、CSS を使用して div を並べて配置する 3 つの方法について説明し、関連する例を示しました。