面试 三栏布局绝对定位、

// html

   

left

   

middle

   

right

 

1：绝对定位三栏布局

.wrap {  

  height: 500px;

  position: relative;

  .left {

    position: absolute;

    left: 0;

    width: 300px;

    background: red;

  }

  .middle {

    position: absolute;

    left: 300px;

    right: 300px;

    width: auto;

    background: yellow;

  }

  .right {

    position: absolute;

    right: 0;

    width: 300px;

    background: blue;

  }

}

2: 浮动三栏布局（注意这里class="middle" 是放在html最后面布局中）

right

middle

  // 这里放在最后

.wrap {

  .left {

    float: left;

    width: 300px;

    background: red;

  }

  .middle {

    background: yellow;

  }

  .right {

    float: right;

    width: 300px;

    background: blue;

  }

}

3： 弹性三栏布局。

.wrap {

  display:flex;

  .left {

    width: 300px;

    background: red;

  }

  .middle {

    flex:1;

    background: yellow;

  }

  .right {

    width: 300px;

    background: blue;

  }

}

四：表格布局三栏布局

.wrap {

  width: 100%; // 注意，这里添加100% 的宽度

  display:table;

  div {

    display: table-cell;

  }

  .left {

    width: 300px;

    background: red;

  }

  .middle {

    background: yellow;

  }

  .right {

    width: 300px;

    background: blue;

  }

}

五、网格布局

.wrap {

  width: 100%;

  display: grid;

  grid-template-rows: 500px;

  grid-template-columns: 300px auto 300px;

  .left {

    background: red;

  }

  .middle {

    background: yellow;

  }

  .right {

    background: blue;

  }

}

 1、float布局 优点: 兼容性很好    缺点：脱离文档流，需要清楚浮动，不然造成高度塌陷

2、Position布局 优点：方便快捷  缺点：脱离文档流，下面子元素也要脱离文档流

3、table布局   优点：使用起来方便,兼容性也不存在问题。  缺点：一个内容增加高度增加，其它两个也会一样增高。

4、flex布局   优点：比较强大, 缺点： 只能支持到IE9以上。（目前移动和PC我都在使用这个）

5、网格布局： 优点：方便快捷  缺点：兼容性差。

六、问题： 假如高度不固定，上面那种布局还可以继续实现？

解：table布局、flex布局。

原文参考：https://www.cnblogs.com/webtaotao/p/11031723.html