css布局之圣杯布局

圣杯布局：都为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）
　　　　
实现思路：
　　　　　　使用float布局框架 ， 用margin为负值 ， position: relative定位
优点

　　　　（1）兼容性好，兼容若有主流浏览器，包括万恶的IE6
　　　　（2）可以实现主要内容的优先加载

实现代码如下：

<div class="container">
        <div class="middle">圣杯布局的中间自适应部分</div>
        <div class="left">圣杯布局左边固定宽度部分</div>
        <div class="right">圣杯布局右边固定宽度部分</div>
</div>

css代码：

.container {
            /* 这里也可以使用margin：0 200px 0 200px */
            padding: 0 200px 0 200px;
            overflow: hidden;
        }
        
        .middle,
        .left,
        .right {
            float: left;/*三个盒子都浮动*/
            position: relative;/*相对定位*/
        }
        
        .middle {
            width: 100%;
            background-color: blue;
        }
        
        .left {
            width: 200px;
            background-color: red;
            margin-left: -100%;
            left: -200px;
        }
        
        .right {
            width: 200px;
            background-color: green;
            margin-left: -200px;
            right: -200px;
        }