三栏布局是一个比较常见的布局，在高度固定的情况下，左右各留出300px，中间自适应，可以有以下的几种写法。

比较常见的有浮动布局和绝对定位布局，但是flex布局现在也非常普遍了，Grid布局可能兼容性不太好，但也不失为一种方法。

因为下面的css代码中有许多的相同的地方，我们先我们先设置一些基本的css代码，用作左中右的颜色识别和高度的设置：

基本的css代码：

*{
   margin: 0; padding: 0;}            .layout {
                   margin-top: 20px;            }            .layout article div {
                   min-height: 100px;            }            .left {
                   background: red;            }            .right {
                   background: green;            }            .center {
                   background: #ddd;            }

 

浮动布局（主要利用的就是浮动脱离文档流的特点）：

　　html代码：

　　　　
     
            
      
                
       
                
       
                
       
                    
        
浮动解决方案
                    
        
这是三栏布局的中间部分这是三栏布局的中间部分
                
       
            
      
 　　　　
     

　　css代码:

　　　　     .layout.float .left {
                   float: left;                width: 300px;            }            .layout.float .right {
                   float: right;                width: 300px;            }            .layout.float .center {
                   margin: 0 300px 0 300px;            }

绝对定位布局（与浮动定位布局的原理基本相同）：

html代码：

　　　　　　
     
                
      
                
      
                
      
                    
       
绝对定位解决方案
                    
       
这是三栏布局的中间部分这是三栏布局的中间部分
                
      
            
     

 

css代码:

　　　　　　.layout.absolute .left {
                   position: absolute;                left: 0;                width: 300px;            }            .layout.absolute .center {
                   margin: 0 300px 0 300px;            }            .layout.absolute .right {
                   position: absolute;                right: 0;                width: 300px;            }

 

弹性盒子布局：

这里用到了flex的一个简写方式。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。  --阮一峰《Flex布局教程》

flex-grow定义项目的放大比例。

如果flex-grow为1，那么它将占据项目的剩余空间，如果有许多个子项目，则他们将等分剩余项目空间。如果不清楚的，建议去看阮一峰老师的Flex布局教程，里面讲的很清晰。

 

html代码：

　　　　　
     
            
      
                
       
                
       
                    
        
flex解决方案
                    
        
这是三栏布局的中间部分这是三栏布局的中间部分
                
       
                
       
            
      
        
     

 

css代码：

　　　　　　  .layout.flex .left-center-right{
                   display: flex;            }            .layout.flex .left {
                   width: 300px;            }            .layout.flex .center {
                   flex: 1;            }            .layout.flex .right {
                   width: 300px;            }

 

Grid布局（兼容性较差）

grid布局则可以直接控制二维布局，直接设定横向和纵向的布局方式。

html代码：

　　　　　
     
            
      
                
       
                
       
                    
        
Grid布局解决方案
                    
        
这是三栏布局的中间部分这是三栏布局的中间部分
                
       
                
       
            
      
        
     

 

css代码：

　　　　　　  .layout.grid .left-center-right{
                   display: grid;                width: 100%;                grid-template-rows: 100px;                grid-template-columns: 300px auto 300px;            }