三栏布局解决方案汇总

三栏布局解决方案

三栏布局，在开发中十分常见，也常作为面试题作为一个布局考点，大致上就是两边固定，中间自适应的一种布局方案，以下汇总出几种几种解决方案，供学习与参考。

Float流式布局

<style type="text/css">
     .left {
      float: left;
      height: 200px;
      width: 100px;
      background-color: red;
    }
    .right {
      width: 200px;
      height: 200px;
      background-color: blue;
      float: right;
    }
    .main {
      margin-left: 120px;
      margin-right: 220px;
      height: 200px;
      background-color: green;
    }
</style>

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

BFC三栏布局解决方案

// 上面流式布局中替代main的解决方案
height: 200px;
overflow: hidden;
background-color: green;

绝对定位

圣杯， 双飞翼解决方案

Table布局

Flex布局

grid网格布局解决方案（目前兼容性尚不大好）

学习总结：常见的三栏布局实现