如何在 HTML 和 CSS 中並排對齊 Div 元素？

對齊

;元素並排

有很多方法可以實現，注意float: left…

對齊有很多種方法元素並排。以下是並排實現兩個元素最常見的方法...

演示：在 Codepen

---

所有範例的基本樣式下方...

這些範例中父元素和子元素的一些基本css 樣式：

.parent {<p>背景：mediumpurple;<br> 填充：1rem;<br>}<br>.child {<br>邊框：1px純靛藍；<br>填充：1rem;<br>}<br></p>

---

使用浮動:留下來注意

使用浮動解決方案可能會對其他元素產生意想不到的影響。 （提示：您可能需要使用clearfix。）

html

<div> <div float-left- child>A</div>
<p> </p>
<div></div>
<br><br><p>css</p>
<p></p>
<pre class="brush:php;toolbar:false"> 浮動： left;<p>}<br></p>

---

使用顯示：內聯區塊是簡單明了

html

<div> <div class="child inline-block-child">A&lt ;/div><p> </p>
<div></div>
<br><br><p>css</p>
<p></p> 顯示： inline-block;<p>}<br><br></p>
<p></p>
<hr>
<h3>顯示：內聯區塊並刪除之間的空格divs</h3>
<p></p>
<p></p>
<p>注意<strong>：可以刪除div標籤之間的空格來刪除這兩個子元素之間的空格： </strong></p>
<p>html</p>
<p></p>
<pre class="brush:php;toolbar:false"><div> <div class="child inline-block-child">A&lt ;/div><div inline-block-child>B</div>
<p></p>
</div>
<br><br><p>css</p>
<p></p>  顯示： inline-block;<p>}<br><br></p>
<p></p>
<hr>
<h3>顯示：flex 是很好的選擇</h3>
<p> </p>
<p>html</p>
<p></p>
<pre class="brush:php;toolbar:false"><div> <div class="child flex-child">A div><p> </p>
<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 類似，但內嵌

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>

---