css三栏式布局

css的三栏式布局
所谓的三栏式布局，指的就是在一个容器里三个div，呈左中右并列排布。其中左右两栏宽度固定，中间一栏根据浏览器窗口宽度自适应。这是一种很常见的布局方式。根据自己的总结和查阅资料，现对三栏布局的方法作以总结。
1.普通方法
html代码：

        <div class="box">            <div class="left"></div>            <div class="right"></div>            <div class="middle"></div>        </div>

css代码

<style type="text/css">            *{                padding:0;                margin: 0;            }            .box{                width: 100%;                overflow: auto;            }            .left{                width: 100px;                height: 500px;                background: lightblue;                float: left;            }            .middle{                height: 500px;                background: lightpink;                margin-left: 100px;                margin-right:100px;            }            .right{                width: 100px;                height: 500px;                background: lightgreen;                float:right;            }        </style>

要点
（1）左右栏通过“左浮动”和“右浮动”的方式被固定到窗口两端。
（2）中间一栏设置margin-left和margin-right为左右栏的宽度个像素，然后因为浮动元素脱离文档流的特性，中间一栏就会自动嵌入到左右栏的中间。
2.传说中的“圣杯模型”
html代码：

        <div class="box">            <div class="middle"></div>            <div class="left"></div>            <div class="right"></div>        </div>

css代码：

<style type="text/css">            *{                padding: 0;                margin: 0;            }            .box{                height: 500px;                padding:0 100px;            }            .left{                width:100px;                height: 500px;                background: lightblue;                margin-left: -100%;                float: left;                position: relative;                left:-100px;            }            .middle{                width: 100%;                height: 500px;                background: lightpink;                float: left;            }            .right{                width:100px;                height: 500px;                background: lightgreen;                margin-left: -100px;                float: left;                position: relative;                left:100px;            }        </style>

要点
（1）html结构为：中左右。将中间一栏的宽度设为100%，左右两栏根据实际情况设置固定的宽度。三栏都设置左浮动。效果为：中间一栏独占一行，左右两栏排列在其下面。
（2）现在要使左右两栏在其适当位置。 第一步，通过设置外层div 的padding-left为左栏宽度和padding-right为右栏宽度的方式为左右两栏预留出位置。第二步，通过设置-margin把左右两栏赶上去。.left的margin-left设置为-100%。100%指的是中栏的width，若为正，是指左栏的左边距父元素左边的距离为中栏width个像素，若为负，我们可以理解为反方向距父元素的左边100%个像素。由于左栏现在所处的位置紧靠父元素的左边，所以左栏刚好上移了中栏个宽度，就移至了中栏的左边，并且与中栏的一部分重合。右栏的margin-left设置为-右栏宽度，原因亦然。第三步，通过给左右栏设置相对定位的方式，使其固定到之前预留的位置上。
3.双飞翼
html代码：

        <div class="box">            <div class="middle">                <div class="middle-inner"></div>            </div>            <div class="left"></div>            <div class="right"></div>        </div>

css代码：

<style type="text/css">            *{                padding: 0;                margin: 0;            }            .box{                height: 500px;            }            .left{                width:100px;                height: 500px;                background: lightblue;                margin-left: -100%;                float: left;            }            .middle{                width: 100%;                height: 500px;                float: left;            }            .middle-inner{                margin:0 100px;                height: 500px;                background: lightpink;            }            .right{                width:100px;                height: 500px;                background: lightgreen;                margin-left: -100px;                float: left;            }        </style>

要点
（1）和圣杯模型不同的是，中间一栏包含一个div，通过给.inner-middle设置margin的方式为左右两栏预留出位置，而且不用通过相对定位的方式把左右两栏固定到其位置，而是直接通过-margin的方式。