三栏布局的几种实现方式

1、float实现三栏布局
给左盒子设置float：left，给右盒子设置float：right，中间盒子设置margin-left和margin-right。需要注意的是，左右盒子要放在中间盒子之前。代码如下：

    
    
    
    


    
left
    
right
    
middle

2、absolute实现三栏布局
给左右盒子设置position：absolute，给左盒子设置left：0；top：0，给右盒子设置right：0；top：0；给中间盒子设置margin-left和margin-right。代码如下：

    
    
    
    


    
left
    
middle
    
right

3、flex实现三栏布局
给父元素设置display：flex，给中间的盒子设置flex：1。代码如下：

    
    
    
    


    
left
    
middle
    
right

4、table实现三栏布局
给父元素设置display：table，给子元素都设置display：table-cell。代码如下：

    
    
    
    


    
left
    
middle
    
right

5、grid实现三栏布局
给父元素设置：display：grid；grid-template-colums：左盒子宽度 auto 右盒子宽度；grid-template-rows：高度。代码如下：

    
    
    
    


    
left
    
middle
    
right

6、calc实现三栏布局
给三个盒子都设置float：left，给中间盒子设置：width：calc(100% - 左右盒子宽度之和)。代码如下：

    
    
    
    


    
left
    
middle
    
right

7、圣杯布局实现三栏布局
给父元素设置margin-left和margin-right，给三个盒子都设置float：left，左盒子设置position：relative；left：-宽度；margin-left：-100%，右盒子设置right：-宽度；margin-right：-宽度，中间盒子设置：width：100%。需要注意的是，中间的盒子要放在左右盒子之前。代码如下：

    
    
    
    


    
middle
    
left
    
right

8、双飞翼布局实现三栏布局
给三个盒子都设置：float：left，给中间的盒子增加一个内盒子，给内盒子设置margin-left和margin-right，中间盒子设置：width：100%，左盒子设置：margin-left：-100%；右盒子设置：margin-left：-宽度。代码如下：

    
    
    
    


    

        
middle
    
    
left
    
right