高度已知，三栏布局，左右宽度300，中间自适应

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%;
    }

image

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

  

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

image

弹性盒子flex解决方案

  
左
  
居中
  
右

image

表格布局(等高)

  
左
  
表格布局(等高)
  
右

.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;
    }

image

网格Grid解决方案

  

  
网格Grid解决方案
  

总结

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