css三栏式布局的五种方式

CSS中的布局方式有很多种，其中三栏式布局是常见的一种。它可以将一个页面分为左、中、右三部分，用于显示不同的内容，下面介绍五种实现三栏式布局的方式。

/* 第一种方式: 使用float属性 */
.container{
  width: 100%;
}
.left{
  width: 20%;
  float: left;
}
.right{
  width: 20%;
  float: right;
}
.middle{
  width: 60%;
}

/* 第二种方式: 使用position属性 */
.container{
  position: relative;
}
.left{
  width: 20%;
  position: absolute;
  left: 0;
}
.right{
  width: 20%;
  position: absolute;
  right: 0;
}
.middle{
  width: 60%;
  margin: 0 20%;
}

/* 第三种方式: 使用flexbox布局 */
.container{
  display: flex;
  justify-content: space-between;
}
.left{
  width: 20%;
}
.right{
  width: 20%;
}
.middle{
  width: 60%;
}

/* 第四种方式: 使用grid布局 */
.container{
  display: grid;
  grid-template-columns: 20% 60% 20%;
}
.left{
}
.right{
}
.middle{
}

/* 第五种方式: 使用table布局 */
.container{
  display: table;
  width: 100%;
}
.left, .right{
  display: table-cell;
  width: 20%;
}
.middle{
  display: table-cell;
  width: 60%;
} 

以上就是五种实现CSS三栏式布局的方式。每种方式各有优缺点，具体使用要根据实际情况进行选择。