实现三栏布局的3种方法
需求：实现左右两栏固定宽度，中间一栏自适应宽度。
1、浮动float+cac()
核心思想：先使用浮动将三栏水平排列，然后对中间栏使用 calc() 函数来计算去除左右两栏固定宽度后剩余的宽度。
HTML结构：
<div class="container"> <div class="left">left</div> <div class="middle">middle</div> <div class="right">right</div> </div>
css样式：
div { height: 100px; } .left { float: left; width: 200px; background-color: red; } .middle { float: left; width: calc(100% - 400%); background-color: green; } .right{ float: left; width: 200px; background-color: blue; }
这是浏览器缩放100%的效果图：
只有到500%的时候才能显示中间栏来：
2、浮动float+margin负值
核心思想：利用浮动的方式，为左右两栏设置对应方向的浮动。中间设置左右两个方向的 margin 负值，注意这种方式，中间一栏必须放到最后。
HTML结构：
<div class="container"> <div class="left">left</div> <div class="right">right</div> <div class="middle">middle</div> </div>
css样式：
div { height: 100px; } .left { float: left; width: 200px; background-color: red; } .right{ float: right; width: 200px; background-color: blue; } .middle { margin-left: 200px; margin-right: 200px; background-color: green;
再次优化后：
怎么样，是不是好多了？别急，还能再优化呢！
3、定位position
核心思想：利用 绝对定位 的方式。
好处：这种实现方式的三栏 HTML 结构可以任意摆放，不用考虑先后顺序。
HTML结构：
<div class="container"> <div class="left">left</div> <div class="right">right</div> <div class="middle">middle</div> </div>
css样式：
.container { position: relative; } .left { position: absolute; left: 0; width: 200px; background-color: red; } .right{ position: absolute; right: 0; width: 200px; background-color: blue; } .middle { position: absolute; left: 200px; right: 200px; background-color: green; }
这是最终100%的效果图：
500%的时候就找不到中间栏了：
缩放到25%的时候中间栏就长得不像话了：
其实还有很多布局方法，例如：网格布局、圣杯布局等等，我就不再列举了。另外，不知道朋友们发现没有，像这样的三栏布局和响应式设计似乎有着异曲同工之妙呀！
