三栏布局的三个典型方法（圣杯、双飞翼、flex）

聊聊三栏布局----左右定宽，中间自适应。

效果图：

圣杯布局

  
middle
  
left
  
right

双飞翼布局

    
    
    


  

    
middle
 
  
  
left
  
right

注意：一定要在要在main中再包裹一个

并设置它的margin:0 180px 0 200px。

Flex布局

    
    
    



    
left
    
middle
    
right

最重要的还是要理解浮动和负margin技术以及width:100%。