圣杯布局和双飞翼布局

圣杯布局和双飞翼布局效果是一样的，都是两边固定，中间自适应，只不过实现思路不同，圣杯布局实现思路：通过两边添加相对定位，并配合left和right属性，效果上表现为三栏是独立分开的，而双飞翼布局是在中间栏再嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right,效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。

圣杯布局：

代码部分：

html

<div class="container">

    <div class="middle">middle</div>

    <div class="left">left</div>

    <div class="right">right</div>

</div>

css

.container{

   height:200px;

  padding:0 200px;

  overflow:hidden;

  }

.middle{

  width:100%;

  height:200px;

  background-color:red;

  float:left;

}

.left{

   width:200px;

   height:200px;

   background-color:blue;

   float:left;

   margin-left:-100%;

   position:relative;

   left:-200px;

}

.right{

  width:200px;

  height:200px;

  background-color:darkorchid;

  float:left;

  margin-left:-200px;

  position:relative;

  right:-200px;

}

双飞翼布局

代码

html

<div class="wrap">

    <div class="main">

          <div class="mainin">main</div>

    </div>

    <div class="left">left</div>

    <div class="right">right</div> 

</div>

css部分

.main,.left,.right{

   float:left;

   height:200px;

}

.main{

    width:100%;

    background:#ace;

}

.left{

    width:20%;

    background:#eee;

    margin-left:-100%;

 }

.right{

    width:30%;

    background:#ddd;

    margin-left:-30%;

}

.mainin{

    margin:0 30% 0 20%;

}

以上是圣杯布局和双飞翼布局代码，希望对大家有所帮助，谢谢