如何使用 CSS 并排浮动三个 div？

在网页布局中，经常需要将多个元素并排展示。而使用 CSS 中的浮动可以实现这一效果。本文将介绍如何使用 CSS 并排浮动三个 div 元素。

HTML 结构

我们首先需要在 HTML 中创建三个 div 元素，分别为 div1、div2 和 div3：

<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>

CSS 样式

接下来，我们需要使用 CSS 为这三个 div 元素设置样式。首先需要为它们设置宽度和高度，以便能够浮动到一行中。这里我们设置宽度为 30%，高度为 100px：

.div1,
.div2,
.div3 {
  width: 30%;
  height: 100px;
}

接下来，我们需要为它们设置浮动样式，这里我们使用 float:left，即向左浮动，以便让它们并排展示：

.div1,
.div2,
.div3 {
  width: 30%;
  height: 100px;
  float: left;
}

最后，我们需要为它们设置一些样式，以便让它们区分开来。这里我们设置背景色和边框：

.div1 {
  background-color: red;
  border: 1px solid black;
}

.div2 {
  background-color: green;
  border: 1px solid black;
}

.div3 {
  background-color: blue;
  border: 1px solid black;
}

完整代码

HTML 代码：

<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>

CSS 代码：

.div1,
.div2,
.div3 {
  width: 30%;
  height: 100px;
  float: left;
}

.div1 {
  background-color: red;
  border: 1px solid black;
}

.div2 {
  background-color: green;
  border: 1px solid black;
}

.div3 {
  background-color: blue;
  border: 1px solid black;
}

结语

通过上述步骤，我们就能够实现将三个div元素并排浮动展示的效果。需要注意的是，如果多个浮动元素宽度和大于父元素的宽度，可能会导致换行，因此需要给父元素设置宽度，以确保它们可以放在一行中展示。