css三栏布局

三栏布局几乎是最常见的布局方式之一，今天介绍五种方式实现左右定宽中间自适应。

1. 使用float进行布局

html

css

显示效果

虽然视觉效果上确实实现了两侧固定中间自适应的效果，但事实上左右两侧其实都是压在center模块上的，如下图所示。

2. 使用绝对定位进行布局

html

css

显示效果

与float布局不同，绝对定位布局各个模块之间没有覆盖的情况。

3. 使用flex布局

flex布局的html结构与绝对定位相同

css

显示效果

由上图的显示效果可以看出来，使用flex布局也能很好地实现三栏布局且模块之间没有相互干扰。

4. 使用table布局

table布局的html与绝对定位布局相同

css

container的width一定要设成100%，不然会缩成一团。

显示效果

从图中也可以看出，table布局能够完美实现三栏布局且各模块之间不会互相干扰。

5. 使用grid进行布局

grid布局的html跟绝对定位布局相同

css

显示效果

从上图可以看出，使用grid布局可以完美实现三栏布局，且各模块之间没有干扰。

以上布局都是在高度固定的前提下实现水平三栏布局，至于高度不固定的情况以及垂直方向上的三栏布局，以后有时间再总结。