并排显示两个 div 的 3 种方法

最常见、最传统的方式（inline-block）

将两个 div 并排放置的最常见方式是使用inline-blockcss 属性。

HTML：



<div class='parent'>
  <div class='child'>child 1</div>
  <div class='child'>child 2</div>
</div>

CSS：



.parent {
  border: 1px solid black;
  margin: 1rem;
  padding: 2rem 2rem;
  text-align: center;
}
.child {
  display: inline-block;
  border: 1px solid red;
  padding: 1rem 1rem;
  vertical-align: middle;
}

上述样式的输出是：

父级的属性inline-block将两个 div 并排放置，这是这里的inline-block功能text-align，就像内联元素一样。

在子级中，我们习惯于verticle-align:middle垂直对齐 div，同时考虑它们的中心。

margin-right我们还可以通过添加第一个 div 和/或margin-left第二个 div在两个 div 之间留出空间。

有几种方法可以将 HTML div 并排放置。最简单、最有效的方法是利用一些 CSS 属性（例如 float、grid 和 flex）。

浮动法

在浮动方法中，我们将使用以下 HTML 标记：

HTML：



<div class="float-parent-element">
  <div class="float-child-element">
    <div class="red">Float Column 1</div>
  </div>
  <div class="float-child-element">
    <div class="yellow">Float Column 2</div>
  </div>
</div>

只是.float-parent-element包含两个元素的父元素.float-child-element。

为了使 div 并排放置，我们将使用以下 CSS 规则：

CSS：



.float-parent-element { 
    width: 50%; 
} 
.float-child-element { 
    float: left; 
    width: 50%; 
} 
.red { 
    background-color: red; 
    margin-left: 50%; 
    height: 100px; 
} 
.yellow { 
    margin-left: 50%; 
    height: 100px; 
    background-color: yellow; 
}

最终的代码如下：

我添加了 50% 的初始宽度，以便.float-parent-element它首先获得一些宽度。

然后，我添加了每个.float-child-elementdiv 的浮动左属性，并将它们并排放置，宽度为父 div 的 50%。

最后，.float-child-element我添加了它们各自的颜色，高度为 100px，并设置了边距，以便更好地区分它们。

Flexbox 方法

使用 flexbox，我们可以使用更直观的方式对齐两个 div 元素。

HTML：



<div class="flex-parent-element">
  <div class="flex-child-element magenta">Flex Column 1</div>
  <div class="flex-child-element green">Flex Column 2</div>
</div>

CSS：



.flex-parent-element {
  display: flex;
  width: 50%;
}

.flex-child-element {
  flex: 1;
  border: 2px solid blueviolet;
  margin: 10px;
}

.flex-child-element:first-child {
  margin-right: 20px;
}

使用 flexbox，我们在父级 .flex-parent-element 上设置了 display: flex。

这将启用 flexbox。

然后在每个 .flex-child-element 中，我们设置 flex: 1。这个数字就像一个比率，用于比较父级 flex 元素中每个子元素的宽度。

由于它们相同，可用空间将被均等分配。由于我们有两个子元素，它们将分别占用 50%。

最终的代码如下所示：

使用边距在 div 之间留出空间，这样它仍然适合

注意，我们通过为 .flex-child-element 添加 margin: 10px 来增加空间。然而，弹性盒子足够智能，在划分剩余可用宽度时会将这额外的 20px 考虑在内。

这意味着您可以添加带边距的空间，而无需计算精确的像素。Flexbox 将自动适配您的内容！

网格法

下面展示了如何使用 CSS 网格将两个 div 并排放置：

HTML：



<div class="grid-container-element">
    <div class="grid-child-element purple">Grid Column 1</div>
    <div class="grid-child-element green">Grid Column 2</div
</div>

CSS：



.grid-container-element { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-gap: 20px; 
    border: 1px solid black; 
    width: 50%; 
} 
.grid-child-element { 
    margin: 10px; 
    border: 1px solid red; 
}

代码如下：

网格的一大变化是，你首先要确定网格模板的外观，也就是布局中需要多少列和/或多少行。

在本例中，我们需要两列等宽。因此，在父元素 .grid-container-element 中，我们用 display: grid 启用网格。然后，我们用 grid-template-columns 属性添加布局所需的列数。

我们希望两列宽度相等，因此将其设置为 1fr 1fr。这会告诉浏览器创建一个两列布局，每列占用 1fr（fr = 小数单位）的空间。

fr 单位是每列与另一列的比例，类似于我们在 flexbox 方法中使用的 flex: 1 规则。将列设置为 1fr 意味着每列将占用相同的空间。

使用 grid-gap 属性设置网格项之间的间距

使用 CSS 网格的一个很大的好处是您不需要使用填充或边距在网格项之间添加空间。

您可以使用 grid-gap（或较新浏览器中的 gap）在网格模板中自动添加空间。

我们已将 grid-gap 设置为 20px，因此浏览器将知道在所有项目之间添加 20px 的空间，无论它们是并排的还是堆叠的。

文章来源：https://dev.to/dawnind/3-ways-to-display-two-divs-side-by-side-3d8b