圣杯布局与双飞翼布局

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

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

一、圣杯布局

HTML：

    
middle
    
left
    
right

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：

    

        
middle
    
    
 
    

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;
}