如何使用 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 对于在内联中并排放置元素非常有用内容。

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>