双飞翼布局

  <style>
*{
margin:;
padding:;
}
.main{
width: 100%;
height: 200px;
background: pink;
float: left;
}
.content{
padding: 0 200px;
}
.left{
height: 200px;
width: 200px;
background: blue;
float: left;
margin-left: -100%;
}
.right{
width: 200px;
height: 200px;
background: yellow;
float: left;
margin-left: -200px;
}
</style>
  <div class="main">
<div class="content">
...
</div>
</div>
<div class="left"></div>
<div class="right"></div>

这里用到了  负边距    先写中间的部分  有一部分原因 也是因为  中间部分要优先显示

圣杯布局

    *{
margin:;
padding:;
}
.content{
width: 100%;
padding: 0 200px;
}
.main{
width: 100%;
height: 200px;
background: red;
float: left;
}
.left{
width: 200px;
height: 200px;
background: pink;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
width: 200px;
height: 200px;
background: blue;
float: left;
margin-left: -200px;
position: relative;
right: 200px;
}
  <div class="content">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>

圣杯 与 双飞翼布局的  区别是  content 标签 在哪里     双飞翼在 main 里面     这样 content  需要  有 padding  如果 中间这部分  不止一个 content  就要写 多个  padding  这样   不划算   也很不方便

所以圣杯   是 双飞翼 的升级版      其实也差不多    就是  content 在最外层   原理和 双飞翼一样  都是  负边距       他是 给最外层的  content 设置  了  padding   里面 仍然是  双飞翼  不过  就是  让 ‘’翅膀‘’  通过 reletave 定位 来  补上  content padding 空出来的部分

05-11 13:25