HTML と CSS で Div 要素を並べて配置するにはどうすればよいですか?

整列

要素を並べて配置

やり方はたくさんありますが、float:left…

整列する方法はたくさんあります要素を並べて表示します。以下は、2 つの要素を並べて表示する最も一般的な方法です…

デモ: Codepen で以下のすべての例を表示/編集します

---

すべての例の基本スタイル以下…

これらの例の親要素と子要素の基本的な CSS スタイル:

.parent {<br> 背景: ミディアムパープル;<br> パディング: 1rem;<br>}<br>.child {<br> ボーダー: 1px ソリッドインディゴ;<br> パディング: 1rem;<br>}<br>

---

float を使用: 左に注意

float ソリューションを使用すると、他の要素に予期せぬ影響を与える可能性があります。 (ヒント: Clearfix の使用が必要な場合があります。)

html

<div> <div クラス='child float-left-child'>A</div><br> <div></div><br>

css

 float: left;<br>}<br>

---

display: inline-block の使用簡単な

html

<div> <div class='child inline-block-child'>A< ;/div><br> <div></div><br>

css

 表示: inline-block;<br>}<br>

---

display: inline-block と間のスペースの削除divs

注: これら 2 つの子要素間のスペースは、div タグ間のスペースを削除することで削除できます。

html

<div> <div class='child inline-block-child'>A< ;/div><div class='子inline-block-child'>B</div><br></div><br>

css

 表示: inline-block;<br>}<br>

---

display: flex は良いですChoice

html

<div> <div class='child flex-child'>A</ div><br> </p><div></div>;<br>

css

 表示: flex;<br>}<br>.flex-child { <br> フレックス: 1;<br>}<br>

---

display: inline-flex は display: flex に似ていますが、 inline

html

<div> <div class='child'>A</div><br> <div></div><br>

css

 表示: inline-flex;<br>}<br>

---

display:grid を使用すると、レイアウト

html

<div> <div class='child'>A</div><br> <div></div><br>

css

 表示: グリッド;<br> グリッド-テンプレート列: 1fr 1fr<br>}<br>

---

以上がHTML と CSS で Div 要素を並べて配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。