两栏布局和三栏布局干货

一、两栏布局

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