如何在 HTML 和 CSS 中并排对齐 Div 元素？

对齐

;元素并排

有很多方法可以实现，注意float: left…

对齐有很多种方法元素并排。以下是并排实现两个元素的最常见方法...

演示：在 Codepen>

---

所有示例的基本样式下面...

这些示例中父元素和子元素的一些基本 css 样式：

.parent {<p> 背景：mediumpurple;<br> 填充：1rem;<br>}<br>.child {<br>边框：1px纯靛蓝；<br>填充：1rem;<br>}<br>

---

使用浮动: 留下注意

使用浮动解决方案可能会对其他元素产生意想不到的影响。 （提示：您可能需要使用clearfix。）

html

<div> <div 类='child float-left-child'>A</div><p> <div></div><br>

css

 浮动： left;<p>}<br>

---

使用显示：内联块是简单明了

html

<div> <div class='child inline-block-child'>A&lt ;/div><p> <div></div><br>

css

 显示： inline-block;<p>}<br>

---

显示：内联块并删除之间的空格divs

注意：可以通过删除 div 标签之间的空格来删除这两个子元素之间的空格：

html

<div> <div class='child inline-block-child'>A&lt ;/div><div 类='child inline-block-child'>B</div><p></div><br>

css

显示： inline-block;<p>}<br>

---

显示：flex 是一个很好的选择选择

html

<div> <div class="child flex-child">A</ div><p> </p>
<div></div>;<br>

css

 显示：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>

css

 显示： inline-flex;<br>}<br>

---

使用display:grid，可以微调布局

html

<div> <div class='child'>A</div><br> </p><div></div><br>

css

 显示：网格；<br> 网格-模板列：1fr 1fr<br>}<br>

---