三栏布局是一种常见的网页布局方式，它可以将网页分成三个主要的区域：左栏、中栏和右栏。下面是一些常见的三栏布局方式：

等宽三栏布局：左、中、右三栏宽度相等，适合于需要在三个区域内放置相同类型的内容的情况。左右固定，中间自适应布局：左、右两栏固定宽度，中间栏宽度自适应，适合于需要在中间栏内放置主要内容的情况。左固定，中右自适应布局：左栏固定宽度，中右两栏宽度自适应，适合于需要在左侧栏内放置导航菜单或者其他固定内容的情况。双飞翼布局：左右两栏固定宽度，中间栏宽度自适应，适合于需要在中间栏内放置主要内容的情况，同时左右两栏也可以放置其他内容。

以上是一些常见的三栏布局方式，具体的应用需要根据实际情况进行选择。

三栏布局，左右两栏宽度固定，中间栏宽度自适应。

假设我们有以下 HTML 结构：

<div class="container">  <aside class="left"></aside>  <article class="content"></article>  <aside class="right"></aside></div>

基本样式如下：

html,body {  height: 100%;  margin: 0;}.container,.left,.right,.content {  height: 100%;  overflow: auto;}

本文将介绍几种实现三栏布局的方式。

使用 float

.left {  width: 210px;  float: left;}.right {  float: right;  width: 210px;}

这里会有一点不一样，我们需要调整一下类为 .right 标签的位置。

<aside class="left"></aside><aside class="right"></aside><article class="content"></article>

注意：使用 float 实现的三栏布局挤压到一定的宽度时，也会存在发生变形情况，这时需要额外进行处理。

使用 position

.container {  position: relative;}.left {  position: absolute;  top: 0;  left: 0;  width: 210px;}.content {  margin: 0 210px;}.right {  position: absolute;  top: 0;  right: 0;  width: 210px;}

.container {  display: flex;}.left {  width: 210px;}.content {  flex: 1;}.right {  width: 210px;}

.container {  display: grid;  grid-template-columns: 210px 1fr 210px;}

查看效果：