圣杯布局与双飞翼布局

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

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

一、圣杯布局

HTML：

<div class="container">
    <div class="middle">middlediv>
    <div class="left">leftdiv>
    <div class="right">rightdiv>
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">middlediv>
    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;
}