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 float-left-child>A</div>
<br> <div></div>
<br><p></p>
<p>css</p>
<p></p>
<pre class="brush:php;toolbar:false"> float: left;<br>}<br>

---

display: inline-block の使用簡単な

html

<div> <div class="child inline-block-child">A<br> <div></div>
<br><p></p>
<p>css</p>
<p></p>
<pre class="brush:php;toolbar:false"> 表示: inline-block;<br>}<br>

---

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

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

html

<div> <div class="child inline-block-child">A<div class="子inline-block-child">B</div>
<br>
</div>
<br><p></p>
<p>css</p>
<p> </p>
<pre class="brush:php;toolbar:false"> 表示: inline-block;<br>}<br>

---

display: flex は良いですChoice

html

<div> <div class="child flex-child">A div><br> <div></div>;<br><p></p>
<p>css</p>
<p></p>
<pre class="brush:php;toolbar:false"> 表示: 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><p></p>
<p>css</p>
<p></p>
<pre class="brush:php;toolbar:false"> 表示: inline-flex;<br>}<br>

---

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

html

<div> <div class="child">A</div>
<br> <div></div>
<br><p></p>
<p>css</p>
<p></p>
<pre class="brush:php;toolbar:false"> 表示: グリッド;<br> グリッド-テンプレート列: 1fr 1fr<br>}<br>

---