[分享]css3把页面分成3行

CSS3是一个具有强大功能的CSS版本，它可以将网页分成三行。使用此功能的步骤如下：

.row {
  display: flex;
  flex-wrap: wrap;
}
.col-1 {
  flex: 1;
}
.col-2 {
  flex: 2;
}
.col-3 {
  flex: 3;
} 

首先，我们在CSS中创建一个名为“.row”的类，它会创建一个灵活的容器。然后，我们创建三个大小不同的列：“.col-1”、“.col-2”和“.col-3”。我们可以通过更改各列的“flex”属性来改变它们的大小。

接下来，我们在HTML中添加一个包含列的DIV：

<div class="row">
  <div class="col-1">
    <p>第一行的内容</p>
  </div>
  <div class="col-2">
    <p>第二行的内容</p>
  </div>
  <div class="col-3">
    <p>第三行的内容</p>
  </div>
</div> 

对于每个列，我们可以放置我们想要的任何内容。可以看到，这个包含列的DIV的所有子元素都会根据其大小自动调整位置。

通过使用CSS3，我们可以轻松地将网页分成三行。此技术在创建响应式布局时非常有用，因为它可以使页面在不同尺寸的屏幕上自动适应。