CSS常用布局之——等分等高解决方案

纵观css盒子（标准or非标准）常用的布局中，我大致分为2类，一种是居中，一种是等分。居中包含了水平居中，垂直居中，水平垂直居中；等分又包含了等分块布局，等分高布局……

等分布局

---

先看看等分的布局方案

1. float

  

    
1
  
  

    
2
  
  

    
3
  
  

    
4
  

兼容性较好（IE 8以上）

**2. flex **

  

    
1
  
  

    
2
  
  

    
3
  
  

    
4
  

兼容性较差（flex属于css3）

兼容性：IE8及以上

3. table

  

    

      
1
    
    

      
2
    
    

      
3
    
    

      
4
    
  

兼容性：可以兼容 IE 8

等高布局

---

1. table

  

    
left
  
  

    
right
    
right
  

利用 table 的特性——每列等宽

2. flex

  

    
left
  
  

    
right
    
right
  

3. float

  

    
left
  
  

    
right
    
right
  

伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。