兩欄佈局和三欄佈局乾貨

一、兩欄佈局

1）浮動佈局：邊欄浮動，主欄留出相應的margin （邊欄寬度）

1. <div id = "aside">

2. </div>

3. <div id = "main">

4. </div>

1. div{

2. height:500px;

3. }

4. #aside{

5. width:300px;

6. background-color:yellow;

7. float:left;

8. }

9. #main{

10. background-color:aqua;

11. margin-left:300px;

12. }

2）浮動佈局+負外邊距（雙飛翼佈局的兩欄版）

1. <div id = "aside">

2. </div>

3. <div id = "main">

4. <div id = "content"></div>

5. </div>

1. div{

2. height:500px;

3. }

4. #aside{

5. width:300px;

6. background-color:yellow;

7. float:left;

8. margin-right:-100%;

9. }

10. #main{

11. width:100%;

12. float:left;

13. }

14. #content{

15. margin-left:300px;

16. background-color:aqua;

17. }

左側固定欄指定一個右側的100%的負外邊距，爲整個屏幕的寬度

使得main的最左側可以與屏幕的最左側對齊

此時的main的寬度爲100%，因此需要爲其子內容centent指定一個左側的外邊距，用於空出左側欄的位置

3）絕對定位：左側欄寬度固定並絕對定位在最左側，右側主欄設置一個margin-left爲邊欄的寬度

1. <div id = "aside">

2. </div>

3. <div id = "main">

4. </div>

1. #aside{

2. position:absolute;

3. left:0;

4. width:200px;

5. }

6. #main{

7. margin-left:200px;

8. }

4）flex佈局（經典的固定-自適應佈局）

1. <div id="container">

2. <div id = "aside"></div>

3. <div id = "main"></div>

4. </div>

1. #container{

2. display:flex;

3. }

4. #aside{

5. flex:0 0 200px;

6. }

7. #main{

8. flex: 1 1;

9. }

二、三欄佈局

1）絕對定位：左右側欄分別用絕對定位固定在左側和右側，中間欄用margin-left和margin-right空出左右位置

1. <div id = "left">

2. </div>

3. <div id = "main">

4. </div>

5. <div id = "right">

6. </div>

1. html,body{

2. margin:0;

3. padding:0;

4. height:100%;

5. }

6. div{

7. height:100%;

8. }

9. #left{

10. width:200px;

11. background-color:yellow;

12. position:absolute;

13. top:0;

14. left:0;

15. }

16. #main{

17. background-color:aqua;

18. margin-left:200px;

19. margin-right:300px;

20. }

21. #right{

22. width:300px;

23. background-color:orange;

24. position:absolute;

25. top:0;

26. right:0;

27. }

 

2）浮動定位法

另左側欄和右側欄向左和向右浮動，中間欄放在最後

再利用左右邊距margin空出左右位置

3）浮動佈局+負外邊距佈局（雙飛翼佈局）

 

1. 三欄都採用左浮動
2. 中間欄div寫在最前面，寬度爲100%
3. 爲左側欄設置margin-left：-100%，也就是整個屏幕的100%，左側欄就跑到中間欄的最左側
4. 右側欄也是左浮動，利用margin-left：-300px；（右側欄的寬度），使其到主欄的最右邊

1. <!--中間欄寫在最前面-->

2. <div id = "main">

3. <div id="content"></div>

4. </div>

5. <div id = "left">

6. </div>

7.  

8. <div id = "right">

9. </div>

1. html,body{

2. margin:0;

3. padding:0;

4. height:100%;

5. }

6. div{

7. height:100%;

8. }

9.  
10.  

11. #main{

12. background-color:aqua;

13. width:100%;

14. float:left;

15. }

16. #left{

17. width:200px;

18. background-color:yellow;

19. float:left;

20. margin-left:-100%;

21. }

22.  

23. #right{

24. width:300px;

25. background-color:orange;

26. float:left;

27. margin-left:-300px;

28. }

29.  

30. #content{

31. margin-left:200px;

32. margin-right:300px;

33. }

這裏面的main其實是佔據了整個屏幕的寬度，而centent設置了margin，所以內容不會被遮擋

4）聖盃佈局

前面與雙飛翼佈局類似，先渲染中間彈性區，再通過給左右盒子設置負邊距實現同一行的顯示“固定-自適應-固定”佈局

聖盃佈局沒有中間centent（相比於雙飛翼）所以兩邊的盒子會覆蓋掉中間的內容

So，Next，利用父級元素設置左右內邊距padding-left和padding-right，把三個盒子往中間擠，邊上留出盒子寬度的空白

再給左右兩個盒子加一個定位

1. .left{ position: relative; left: -200px;}

2. .right{position: relative;right: -200px;}

 

聖盃佈局和雙飛翼佈局的不同之處就在於，中間內容不被遮擋，的實現方式

一個是通過增加一個div，content

一個是通過給主元素設置內邊距padding