0、题目
- 使用 HTML 与 CSS 按照如下示例图， 实现三栏式布局。
- 左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高
1、解题方式：
还有一个要求是“中间一栏长度改变时，父元素的高度始终为子元素中最高的高度”，这个请看如何解决高度坍塌问题——BFC模式，先来分析布局。
看到这个任务，首先想到的就是双飞翼布局，之后有看其他人的代码，总结了一下：
一、position方式：
左、中、右顺序可以任意调整。左右设置绝对定位脱离文档流，再通过left、right、top 等属性进行定位，中间嵌套一个div，设置左右外边距分别为左右部分的宽度，使得中间部分的内容不会被左右遮盖。
<style> *{ margin:0; padding:0; } .left,.right{ position:absolute; /*左右绝对定位、定高宽*/ height:200px; width:200px; } .left{ background-color: red; left:0; } .center{ min-height:200px; background-color: yellow; } .content{ margin:0 200px; /*避免中间内容被遮盖*/ } .right{ right:0; top:0; background-color: blue; } </style> <body>
<div class="container">
<div class="left"></div> <div class="center"> <div class="content"></div> </div> <div class="right"></div>
</div>
</body>
二、float方式：
左、右分别浮动到左右，中间部分设置相应的左右外边距；
建议按照左、右、中顺序，因为只有左右设置的是浮动，如果把中放在右前面，就会先渲染中间部分，由于中间盒子div会占满一行，就会导致浮动元素的位置不够，右边的盒子就会被挤到下一行；
也可以按照左、中、右的顺序，可以把左中外面再套一层div，设置float:left；width：100%；margin-right：-200px;（右边盒子的宽度）,这样右边的盒子不会被挤下去，而且可以先渲染中间的内容，具体情况再选择吧。
<style> *{ margin:0; padding:0; } .left,.right{ height:200px; width:200px; } .left{ background-color: red; float:left; } .center{ min-height:200px; margin:0 200px; background-color: yellow; } .right{ float:right; background-color: blue; } </style> <body>
<div class="container">
<div class="left"></div> <div class="right"></div> <div class="center"></div>
</div> </body>
三、负外边距方式：
（1）双飞翼布局：
按照中、左、右的顺序，三部分都左浮动，中间的宽度为100%，左右分别设置相应的负外边距（左：margin-left:-100%；右：margin-left:-200px;)，中间嵌套一个div，设置左右外边距避免内容被遮盖。
（2）圣杯布局：
和双飞翼在布局上大致相同，都是左浮动、中间宽度为100%，左右设置相应负外边距，但由于中间的内容会被左、右两部分覆盖，所以两种布局的不同点在于解决这个问题的方法不同。
圣杯布局先为中间部分设置内边距，左、右内边距分别为左右盒子的宽度，把内容拉回到中间最终需要自适应的部分，由于设置的是内边距，左右两部分也会跟着过来，再通过相对定位使左边盒子相对向左偏移，使右边盒子相对向右偏移，这样左右两部分就不会遮挡住中间的内容了。
（3）其他布局：
上面两种都是按照中、左、右的顺序，其实左、中、右或者左、右、中顺序都可以，只要中间宽度为100%，再设置浮动以及相应的负外边距。
注意：中间部分内容遮盖问题以及左右盒子有可能会被中间遮盖，只要设置被遮住部分的position：relative和z-index：999，让它保持在最前即可。
如何选择布局方式？主要内容放在前面先渲染。