[分享]css3怎样将div分成3部分

CSS3是一种用于网页样式处理的技术，让我们可以轻松地对网页进行美化。今天我们将介绍CSS3如何将div分成3部分。 首先，我们需要准备一个HTML文件，并在文件中创建一个包含三个div的容器...

CSS3是一种用于网页样式处理的技术，让我们可以轻松地对网页进行美化。今天我们将介绍CSS3如何将div分成3部分。

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div> 

首先，我们需要准备一个HTML文件，并在文件中创建一个包含三个div的容器。每个div将表示网页中的一部分。我们可以使用以下代码：

.container {
  display: flex;
  justify-content: space-between;
  height: 100vh;
}

.left {
  width: 30%;
  background-color: red;
}

.center {
  width: 40%;
  background-color: green;
}

.right {
  width: 30%;
  background-color: blue;
} 

接下来，我们需要在CSS文件中使用flexbox属性，这样我们可以轻松地将三个div放在一起。为此，我们需要使用以下代码：

以上代码将创建一个名称为“container”的类，该类将使用flexbox布局来放置三个div。我们使用了justify-content属性来让div在容器中保持平均分布。此外，我们还为每个div设置了背景颜色和不同的宽度。

恭喜！现在你已经知道了如何使用CSS3将div分成三部分。