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

在前端开发中，我们经常会遇到需要把两个div并排放置，同时让它们的高度相同的情况。这通常可以通过CSS来实现，下面我们来介绍如何实现这个效果。

方法一：使用浮动布局

<div class="wrapper">
  <div class="box left">left content</div>
  <div class="box right">right content</div>
</div>

首先，我们需要创建一个容器wrapper和两个需要并排放置的div：left和right。

接下来，我们可以使用CSS中的float属性来实现浮动布局。具体代码如下：

.wrapper {
  overflow: hidden; /* 清除浮动 */
}
.left {
  float: left;
  width: 50%; /* 设置左边div宽度为50% */
}
.right {
  float: right;
  width: 50%; /* 设置右边div宽度为50% */
}

最后，我们可以给left和right设置相同的高度，使它们看起来是相同高度的。可以使用CSS中的height属性或者使用padding等其他方法来实现。

.left, .right {
  height: 200px; /* 设置相同的高度 */
  background-color: #ccc; /* 为了看清楚效果，给div添加背景色 */
}

这样，我们就可以实现了两个div并排放置，且高度相同的效果。

方法二：使用flex布局

另一种实现方式是使用CSS中的flex布局。代码如下：

<div class="wrapper">
  <div class="box left">left content</div>
  <div class="box right">right content</div>
</div>

.wrapper {
  display: flex;
  flex-wrap: wrap;
}
.box {
  flex: 1;
}
.left {
  background-color: #ccc;
}
.right {
  background-color: #eee;
}

在这个示例代码中，我们给wrapper容器设置了display: flex属性，并且通过flex-wrap: wrap实现了多行布局。

我们给左右两边的div设置了flex: 1属性，这样它们的宽度就会自适应屏幕大小，并且相同。

最后，我们可以通过给left和right添加不同的背景色，使它们看起来更加明显。

这两种方法都可以实现并排放置相同高度的两个div效果，选择哪种方法取决于实际需求和使用习惯。