如何使用 HTML 和 CSS 並排對齊 DIV 元素？

對齊

;元素並排

在使用HTML 和CSS 並排對齊元素的過程中，最臭名昭著的方法是float: left，但這不是唯一的方法。 /p>

這裡有各種實現並排對齊的技術，從廣泛使用的到更多的

---

Float

使用浮動：向左或向右是一種方法。但是，請務必小心，因為它可能會影響其他元素的佈局。

HTML

<div>
<br> <div> <br> <div> <br>分區class="float-left">B div><br>
</div>
<br><br>CSS<br><pre class="brush:php;toolbar:false">.float-left {<br> float : left;}<p></p>

---

內嵌顯示

顯示: 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;}<p></p>

要消除內聯區塊元素之間的空格，請刪除 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;}<p></p>

---

內聯Flexbox

內聯Flexbox

內聯flexbox對於在內聯中並排放置元素非常有用內容。

HTML

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

CSS

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

---

CSS網格

CSS 網格提供元素定位的精確控制。

HTML

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

CSS

.grid-parent {<br> 顯示：網格;<br>網格範本列：1fr 1fr;<br>}<br>