如何使用CSS并排放置相同高度的两个div？

在网页开发中，有时候我们需要把两个div并排放置，而且这两个div还需要保持相同的高度。本文将介绍几种方法实现这个效果。

方法一：使用table布局

在HTML中，我们可以使用table标签来实现网页布局，而且table布局的一个优点就是可以实现两个div并排放置并保持相同高度的效果。

示例代码：

<table>
  <tr>
    <td>
      <div class="box"></div>
    </td>
    <td>
      <div class="box"></div>
    </td>
  </tr>
</table>

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  padding: 0;
}

.box {
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

示例效果：

该例子使用了table布局来实现两个div并排放置，每个div被置于一个td元素内。由于table元素会自动将行中的所有单元格填充为相同的高度，所以这两个div会保持相同高度。

但是，使用table布局也有一些缺点，比如性能较低、代码冗余等。

方法二：使用flexbox布局

在现代的网页开发中，我们可以使用flexbox布局来实现网页布局。flexbox布局的一个优点就是可以方便地实现两个div并排放置并保持相同高度的效果。

示例代码：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

示例效果：

该例子使用了flexbox布局来实现两个div并排放置，父元素.container被设置为display:flex，使得子元素.box成为了flex子项。在子元素.box上，我们设置flex:1，使得两个.box元素平分父元素的宽度。由于.flexbox是根据子元素高度绘制网格的，所以这两个div会保持相同高度。

方法三：使用grid布局

与flexbox布局类似，grid布局也是一种比较新的布局方式，也可以实现两个div并排放置并保持相同高度的效果。

示例代码：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}

.box {
  height: 100px;
  background-color: #ccc;
  padding: 10px;
}

示例效果：

该例子使用了grid布局来实现两个div并排放置，父元素.container被设置为display:grid，使得子元素.box成为了grid子项。在父元素上，我们设置grid-template-columns:repeat(2,1fr)，将父元素分成两列让两个div并排放置。由于.grid是根据子元素高度绘制网格的，所以这两个div会保持相同高度。