區別看圖:聖盃佈局是獨立的左中右結構,而雙飛翼是讓左中右在一行顯示佈局
不論是聖盃仍是雙飛翼中間模塊必需要在全部的模塊的最上邊spa
<div class="main">
<!-- middle必需要在全部模塊的最上邊 --> <div class="middle">中間</div> <div class="left">左邊</div> <div class="right">右邊</div> </div>
複製代碼
讓咱們想一下聖盃佈局的思路code
*{margin:0;padding:0}
.main { padding:0 200px }
.main>div{ float:left;position:relative;height:300px }
.middle { width:100%;background:red }
.left { width:200px;margin-left:-100%;left:-200px;background:blue }
.right { width:200px;margin-left:-200px;right:-200px;background:pink}
複製代碼
1.讓左右浮動在一行顯示,相對定位cdn
2.讓中間模塊的middle寬度爲100%xml
3.讓左邊的色塊移動到middle前面,margin-left:-100%blog
4.讓右邊的色塊移動到middle的後面,margin-left:-寬度string
5.給三個小塊的父元素加一個內填充的屬性padding,爲的是填充擠到中間it
6.給左邊的塊移動到左邊left:-200px, 給右邊的塊移動到右邊right:-200pxio
<div class="main">
<!-- middle必需要在全部模塊的最上邊 --> <div class="middle"> <div class="middle-inner">中間</div> </div> <div class="left">左邊</div> <div class="right">右邊</div> </div>
複製代碼
讓咱們想一下雙飛翼佈局的思路class
*{ margin: 0;padding:0; }
.main>div { float:left;position: relative;height: 300px; }
.middle { width: 100%;background-color: red }
.left { width:200px;margin-left:-100%;background-color:blue }
.right { width: 200px;margin-left:-200px;background-color:pink }
.middle-inner{margin:0 200px; background-color: red; height:300px;} /*區別*/
複製代碼
1.給左,中,右 加浮動,在一行顯示
2.給middle寬度爲100%
3.讓左邊的模塊移動middle的左邊 margin-left:-100%
4.讓右邊的模塊移動middle的右邊 margin-left:-本身寬度
5.給middle裏面的容器添加外間距 margin: 左右
<div class="main">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
複製代碼
*{ margin: 0;padding:0; }
.main{width:100%;}
.main>div{height:300px;}
.middle{width:100%;background: red;}
.left{position: absolute;top:0;left:0;width:200px;background-color: blue;}
.right{position: absolute;top:0;right:0;width:200px;background-color: pink}
複製代碼