双飞翼布局
<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 空出来的部分