float解决方案，DOM顺序与视觉顺序相符

一个左浮动一个右浮动, 中间的元素,利用calc给一个固定的宽度,并设置成行内块元素,即可

  
        
      
    
  
     
      123
     
  
     
      456
     
  
     
      789
     
    
复制代码

float解决方案，DOM顺序与视觉顺序不符

  
        
      
    
  
     
  
     
  
     
      float解决方案，DOM顺序与视觉顺序不符
     
    
复制代码

position解决方案

    
  
     
      123
     
  
     
      456
     
  
     
      789
     
    
* {      padding: 0;      margin: 0;    }    html, body{      width: 100%;      height: 100%;      /*background: chocolate;*/    }    .box {      height: 100%;      position: relative;    }    .box1{      position: absolute;      top: 0;      left: 0;      width: 300px;      height: 100%;      background: cadetblue;    }    .box3{      position: absolute;      top: 0;      right: 0;      width: 300px;      background: cornflowerblue;      height: 100%;    }    .box2{      margin: 0 300px;      background: cornsilk;      height: 100%;    }复制代码

圣杯布局(margin负值解决方案),DOM顺序与视觉顺序不符

    
  
     
    
      
       圣杯布局(margin负值解决方案),DOM顺序与视觉顺序不符
      
  
     
  
     
      左
     
  
     
      右
     
    
复制代码

弹性盒子flex解决方案

    
  
     
      左
     
  
     
      居中
     
  
     
      右
     
    
复制代码

表格布局(等高)

    
  
     
      左
     
  
     
      表格布局(等高)
     
  
     
      右
     
    
.ct4 {      display: table;      width: 100%;      margin-bottom: 100px;    }    .ct4 > div {      display: table-cell;      height: 500px;    }    .l4 {      width: 300px;      background: cornsilk;    }    .r4 {      background: cadetblue;      width: 300px;    }复制代码

网格Grid解决方案

    
  
     
  
     
      网格Grid解决方案
     
  
     
    
复制代码

总结

建议用前几种方案,因为后面几种的方案,有兼容性