如何在 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>
<pre class="brush:php;toolbar:false"> 显示： inline-block;<p>}<br></p>

---

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

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

html

<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 id="显示-flex-是一个很好的选择选择">显示：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>

---