你有几种方式实现CSS三栏布局

前言

常见的有种网页布局有很多种，比如单列布局、实现等高布局、布局三栏布局等等。有种其中三栏布局在很多网站都有用到，实现这也是布局一种比较经典的网页布局方式，当然，有种想要实现网页三栏布局的实现方式有非常之多，我们今天就主要学习一些哪些方式可以实现三栏布局，布局这样小伙伴们遇到三栏布局需求的有种时候就可以根据需求自行选择合适的布局方式了。

1.何为三栏布局

我们可以先来看几个有三栏布局的实现网站页面：

上面两张图都有三栏布局的身影，大家仔细看这两张图，布局会发现它们的有种布局的形式差不多类似的。香港云服务器

概念：

三栏布局顾名思义有左中右三栏，实现其中左边列和右边列的布局宽度都是固定的，中间列的宽度是自适应的。

我们理解三栏布局重点抓住几个关键词即可： 左右宽度固定，中间区域自适应 。

比如我们用示意图就可以很好的表示出来，如下图所示：

2.实现方式

我们既然知道三栏布局是怎么回事了，那么我们就可以尝试着去用不同的方式去实现它了，毕竟这是在项目中很常见的一种布局方式。

2.1 浮动布局

这是一种比较经典的方式，站群服务器因为它采用了浮动的方式来实现三栏布局，这种方式很好理解，很多初学者都是使用这种方式来实现三栏布局。

实现原理：

margin

代码如下：

.container {

position: relative;

}

.main {

height: 100vh;

margin: 0 120px;

background-color: green;

}

.left {

position: absolute;

width: 100px;

height: 100vh;

left: 0;

top: 0;

background-color: red;

}

.right {

position: absolute;

width: 100px;

height: 100vh;

background-color: blue;

right: 0;

top: 0;

}

复制代码

实现效果：

可以看到定位的方式非常简单，所需要的 ​​CSS​​ 知识也不是很多，只需要了解定位即可。

总结

我们每天都在逛各种各样的网页，你是否注意过它们的布局方式呢？今天我们只是讲了三栏布局这种常见的布局方式，实现它的方式就有这么多种，那么你可以下来再仔细思考一下其它布局模式有哪些实现方式。