如何将 div 并排放置

在网页开发中，我们通常需要将多个元素并排放置在同一行或同一行内。使用 div 元素并排放置是最常见的方法之一。

方法一

使用 float 属性，设置左浮动或右浮动，使多个 div 元素并排显示。示例代码如下：

<div class="container">
  <div class="left">左侧内容</div>
  <div class="right">右侧内容</div>
</div>

.left {
  float: left;
  width: 50%;
}

.right {
  float: right;
  width: 50%;
}

效果如下：

方法二

使用 display: inline-block 属性，让多个 div 元素以块级元素的方式并排显示。示例代码如下：

<div class="container">
  <div class="box">红色</div>
  <div class="box">绿色</div>
  <div class="box">蓝色</div>
</div>

.box {
  display: inline-block;
  width: 30%;
  margin-right: 3%;
  background-color: #fff;
  border: 1px solid #ccc;
  height: 100px;
}
.box:last-child {
  margin-right: 0;
}

效果如下：

方法三

使用 Flexbox 布局，使多个 div 元素在容器内弹性排列。示例代码如下：

<div class="container">
  <div class="box">红色</div>
  <div class="box">绿色</div>
  <div class="box">蓝色</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  flex-basis: 30%;
  margin-bottom: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  height: 100px;
}

效果如下：

以上就是三种常见的方法将 div 并排放置的示例代码及效果。根据实际需要选择最合适的方法即可。