一、圣杯布局
1、什么是圣杯布局
如下图,圣杯布局就是左右两个div宽度固定,中间div自适应的三栏布局。
2、文档结构
<div class="container">
<div class="center"> center center center center center center center center </div>
<div class="left"> left left left left left left left left </div>
<div class="right"> right right right right </div>
</div>
3、目的
把中间栏放在文档流前面,以优先渲染。
4、实现原理
① 给left、center、right三个div都设置左浮动float:left,由于中间栏需要自适应,因此
要给center宽度设置为100%,此时三个div的排列如下(顺序为center ——> left ——> right):