三栏布局解决方案汇总

三栏布局解决方案三栏布局，在开发中十分常见，也常作为面试题作为一个布局考点，大致上就是两边固定，中间自适应的一种布局方案，以下汇总出几种几种解决方案，供学习与参考。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网格布局解决方案（目前兼容性尚不大好）学习总结：常见的三栏布局实现