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

整列

要素を並べて配置

HTML と CSS を使用して要素を並べて配置する場合、最も悪名高いアプローチは float: left ですが、これが唯一の方法ではありません。 /p>

ここでは、並べて配置するためのさまざまなテクニックを紹介します。

---

Float

float の使用: 左または右も方法の 1 つです。ただし、他の要素のレイアウトに影響を与える可能性があるため注意してください。

HTML

<div>
<br> <div> B</div>
<br>
</div><br>

CSS

.float-left {<br> float : left;<br>}<br>

---

インライン表示

表示: inline-block を使用すると、レイアウトに影響を与えることなく要素を並べて配置できます。ただし、間にスペースが入る場合があります。

HTML

<div>
<br> <div> <div class="inline-block">B</div>
<br>
</div>
<br><br>CSS<br><pre class="brush:php;toolbar:false">.inline-block {<br> 表示: inline-block;<br>}<br>

inline-block 要素間のスペースを削除するには、HTML 間のスペースを削除します。タグ。

---

Flexbox

Flexbox は、強力なレイアウト機能を備えており、要素を簡単に整列させる水平方向。

HTML

<div> <div class="flex-child">A</div>
<br> <div></div>
<br><br>CSS<br><pre class="brush:php;toolbar:false">.flex-parent {<br> 表示: flex;<br>}<br>.flex-子 {<br> フレックス: 1;<br>}<br>

---

インラインフレックスボックス

インラインフレックスボックスは、インライン内で要素を並べて配置するのに便利ですcontent.

HTML

<div> <div>A</div>
<br> <div>B</div> <br>
</div>;<br>

CSS

.inline-flex-parent {<br> 表示: inline-flex;<br>}<br>

---

CSS グリッド

HTML

<div> <div>A</div>
<br> <div>B</div>
<br>
</div><br>

CSS

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