前端页面布局——三栏布局

先说说三栏布局：整体高度已知，左右两边宽度固定，中间内容宽度自适应。

总共是有五种实现方式，分别是：
浮动解决方案、绝对定位解决方案、flexbox解决方案、table解决方案、网格布局解决方案。
下面，上代码，看效果。
页面初始化

浮动解决方案

  

    
    

      

      

      

        
浮动解决方案
      
    
  

优点：兼容性好
缺点：元素脱离文档流，产生浮动

绝对定位解决方案

  

    
    

      

      

        
绝对定位解决方案
      
      

    
  

这里利用绝对定位脱离文档流的特性来实现三栏布局。

优点：快速的页面开发。
缺点：元素脱离文档流，意味着下面元素也得脱离文档流，可使用性较差。

flexbox解决方案

  

    
    

      

      

        
flexbox解决方案
      
      

    
  

这里使用了flex布局，这在移动端开发非常常见，但PC端IE8不兼容。
关于flex布局这里就不做过多讲解，有兴趣同学可以看阮大神教程。
http://www.ruanyifeng.com/blo...^%$

table布局解决方案

  

    
    

      

      

        
table解决方案
      
      

    
  

兼容性好，当PC端使用flex布局而IE8不兼容时，可以尝试使用表格布局进行实现。
table布局算是比较老的前端技术了，曾经风靡一时，现在基本已被摒弃。
关于table布局，大家可以看看下面这篇文章。
https://segmentfault.com/a/11...

网格布局解决方案

  

    
    

      

      

        
网格布局解决方案
      
      

    
  

想学习网格布局的可以玩一下链接中的小游戏：https://cssgridgarden.com/

说完这个，咱说点题外话，关于三栏布局中间部分css代码的编写，不需要单独设置特定的width，看过张鑫旭大神的css世界就可以了解到，整个文档是基于“流”这个概念的，width默认是auto，就像水流一样充满整个容器。