如何使用 CSS 并排对齐 div 元素？

对齐

;元素并排

对齐

;元素并排是 Web 开发中的常见任务。有多种不同的方法可用于实现此目的，每种方法都有自己的优点和缺点。

Float: Left

< ;p> float: left 属性是并排对齐元素的简单方法。只需将以下 CSS 添加到您的元素中：

.element {<br> float: left;<br>}<br>

这将导致元素浮动到其容器的左侧。但是，使用 float 有一些限制： left:

• 它可能会导致页面上其他元素的布局出现问题。
  
• 它并不适用于所有

Inline-Block

inline-block 属性是一个更并排对齐元素的可靠方法。它的工作原理是将元素的显示属性设置为内联，这意味着元素将像文本一样流动。但是，该元素也将具有宽度和高度，因此它的行为类似于块元素。这允许您并排对齐元素，而不会导致页面上其他元素的布局出现问题。

要使用 inline-block，请将以下 CSS 添加到您的元素:

.element {<br> 显示： inline-block;<br>}<br>

Flexbox

Flexbox 是一个强大的布局系统，可以用于轻松创建复杂的布局。它允许您并排、垂直或水平对齐元素，甚至将它们包裹在其他元素周围。要使用 Flexbox，您需要将以下 CSS 添加到容器元素：

.container {<br> display: flex;<br>}<br><p><p>然后您可以将以下 CSS 添加到您的子元素以将它们并排对齐side:</p></p><p></p><pre class="brush:php;toolbar:false">.child {<br> flex: 1;<br>}<br>

网格< ;/h2>

网格是较新的 CSS 布局比 Flexbox 更强大的系统。它允许您轻松创建复杂的布局，并且内置支持并排对齐元素。要使用 Grid，您需要将以下 CSS 添加到容器元素：

.container {<br> display: grid;<br> grid-template-columns:重复(2, 1fr);<br>}<br>

这将创建一个包含两列的网格。然后，您可以将子元素添加到网格中，它们将自动并排对齐。