前端三列布局的几种实现方式

本文主要讲述几种常用的前端三列布局的方式。

1.两侧浮动＋中间自动铺开

主要是左右盒子两边分别float:left,float:right，中间通过margin值自动撑开。代码如下：

 
 
 
左盒子
右盒子
中间盒子
 
 

实现结果如下：

2.绝对定位

给每个盒子设置绝对定位，用left,right值实现。代码如下：

 
 
 
 
 
左盒子
中间盒子
右盒子
 
 
 

结果如下：

3.BFC实现三列布局

利用BFC清除浮动的特性来实现（overflow:hidden等），代码如下：

 
 
 
 
左盒子
右盒子
中间盒子
 
 

结果如下：

4.双飞翼布局

利用margin负值移动元素位置

 
 
 
 
 
中间的盒子
 
 
左边的盒子
 
右边的盒子
 
 

结果如下：

5.圣杯布局。

与双飞翼布局类似 不同的是圣杯布局的中间盒子是被另一个父元素包裹这的，而圣杯布局不需要被包裹。而是使用padding值来确定盒子内部的内容位置。代码如下：

 
 
 
 
 
main
left
right
 
 
 
 

结果如下：

6.flex实现三列布局

利用flex的属性实现三列布局，对flex属性不熟悉的同学可以先看阮一峰大神的关于flex的讲解。非常简单，代码如下：

 
 
 
 
 
我是左边的盒子
我是中间的盒子
我是右边的盒子
 
 
 

结果如下：

7.table实现三栏布局

 
 
 
 
 
我是左边的盒子
我是中间的盒子
我是右边的盒子
 
 
 

结果如下：

8.grid实现三栏布局

 
 
 
 
 
我是左边的盒子
我是中间的盒子
我是右边的盒子
 
 
 

结果如下：