圣杯布局与双飞翼布局

圣杯布局与双飞翼布局，都是属于三列布局的经典布局。

通俗的来说就是左右两栏固定宽度，中间部分自适应的三栏布局。

一、圣杯布局

HTML：

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

css:

*{
   margin:0;
   padding:0;
}

.container{
    padding:0 200px 0 200px;
    overflow：hidden;
}

.left,.middle,.right{
    position:relative;
    float:left;
    min-height:200px;
}

.left{
    margin-left:-100%;
    left:-200px;
    width:200px;
    background:#ccc
}

.middle{
    width:100%;
    background:red;
}

.right{
    margin-left:-200px;
    right:-200px;
    width:200px;
    background:green
}

二、双飞翼布局

HTML：

<div class="container">
    <div class="middle">
        <div class="middleinner">middle</div>
    </div>
    <div class="left"></div> 
    <div class="right"></div>
</div>

css:

*{
    margin:0;
    padding:0;
}

.middle,.left,.right{
    float:left;
    min-height:200px;
}

.left{
    width:100px;
    margin-left:-100%;
    background:red;
}

.right{
    width:200px;
    margin-left:-200px;
    background:blue;
}

.middle{
   width:100%;
}

.middleinner{
    margin:0 200px 0 100px;
    min-height:200px;
    background:green;
}