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

丸子沒櫻桃發表於2018-11-13

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

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

不管是聖盃還是雙飛翼中間模組必須要在所有的模組的最上邊

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

    <div class="main">
	<!-- middle必須要在所有模組的最上邊 -->
	<div class="middle">中間</div>
	<div class="left">左邊</div>
	<div class="right">右邊</div>
    </div>
複製程式碼

讓我們想一下聖盃佈局的思路

*{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.讓左右浮動在一行顯示，相對定位

2.讓中間模組的middle寬度為100%

3.讓左邊的色塊移動到middle前面，margin-left:-100%

4.讓右邊的色塊移動到middle的後面，margin-left:-寬度

5.給三個小塊的父元素加一個內填充的屬性padding,為的是填充擠到中間

6.給左邊的塊移動到左邊left:-200px, 給右邊的塊移動到右邊right:-200px

2.雙飛翼佈局

<div class="main">
    <!-- middle必須要在所有模組的最上邊 -->
    <div class="middle">
	<div class="middle-inner">中間</div>
    </div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</div>
複製程式碼

讓我們想一下雙飛翼佈局的思路

*{ 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}
複製程式碼

相關文章