聖盃佈局與雙飛翼佈局區別(左右兩欄固定,中間撐滿屏幕)

區別看圖:聖盃佈局是獨立的左中右結構,而雙飛翼是讓左中右在一行顯示佈局

不論是聖盃仍是雙飛翼中間模塊必需要在全部的模塊的最上邊spa

1.聖盃佈局,中間的優先渲染,獨立的左中右結構

<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

2.雙飛翼佈局

<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: 左右

3.定位

<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}
複製代碼
相關文章
相關標籤/搜索
本站公眾號
   歡迎關注本站公眾號,獲取更多信息