DIV+CSS自适应布局_html/css

回来后，经过百度，哇！原来方法如此之多~还如此简单~
下面就来总结一下~

一、两栏布局（左定宽，右自动）
1. float + margin
即固定宽度元素设置float属性为left,自适应元素设置margin属性，margin-left应>=定宽元素宽度。
举例：
HTML代码：

3. 我是左栏
6. 我是右栏

CSS代码

1. html,body,div{
2. margin: 0;
3. padding: 0;
4. }
5. .wrap{
6. margin: 10px;
7. }
8. .wrap_left{
9. float: left;
10. width: 200px;
11. background-color: red;
12. }
13. .wrap_right{
14. margin-left: 220px;
15. background-color: green;
16. }

运行代码保存代码提示：您可以先修改部分代码再运行!power by W3Cfuns.com

2.position + margin
即在父标签设置position属性为relative；子标签中定宽元素设置position属性为absolute；自适应元素设置margin属性，margin-left>=定宽元素宽度。
举例：
HTML代码

3. 我是左栏
6. 我是右栏

CSS代码

1. html,body,div{
2. margin: 0;
3. padding: 0;
4. }
5. .wrap{
6. margin: 10px;
7. position: relative;
8. }
9. .wrap_left{
10. position: absolute;
11. width: 200px;
12. background-color: red;
13. }
14. .wrap_right{
15. margin-left: 220px;
16. background-color: green;
17. }

运行代码保存代码提示：您可以先修改部分代码再运行!power by W3Cfuns.com

3.float + 负margin
即给自适应宽度元素定义一个父标签，并设置float属性为left；width为100%；自适应宽度元素设置margin，margin-left应>=定宽元素宽度；
固定宽度元素设置margin-left属性为负值：-100%；
除此之外应注意HTML结构中应先写自适应元素，再写固定宽度元素。
举例：
HTML代码

3. 我是右栏
7. 我是左栏

CSS代码

1. html,body,div{
2. margin: 0;
3. padding: 0;
4. }
5. .wrap{
6. float: left;
7. width: 100%;
8. }
9. .wrap .wrap_right{
10. margin-left: 220px;
11. background-color: green;
12. }
13. .wrap_left{
14. float: left;
15. width: 200px;
16. margin-left: -100%;
17. background-color: red;
18. }

运行代码保存代码提示：您可以先修改部分代码再运行!power by W3Cfuns.com

注：使用的float属性，必要时清除一下浮动。

4.用table布局实现
来自评论里@qazxsw的方法：

运行代码保存代码提示：您可以先修改部分代码再运行!power by W3Cfuns.com

不过这个方法，一定要设置高度才可以~

5.触发BFC实现 —— 来自评论里柯南同学@15913127081的方法
关于BFC是什么、怎么触发BFC以及BFC可以用来做什么，大家可以看看这篇，前端精选文摘：BFC 神奇背后的原理（我会告诉你我也是才看的么~哈哈~）
实现方法，即为定宽元素设置float:left;自适应宽度元素设置可以触发BFC的属性。（可以触发BFC的属性？继续看上面那个链接！！）
示例：
HTML代码：

2. 我是左栏
5. 我是右栏

CSS代码：

1. html,body,div{
2. margin: 0;
3. padding: 0;
4. }
6. .wrap_left{
7. float: left;
8. width: 200px;
9. background-color: red;
10. }
11. .wrap_right{
12. overflow: hidden;
13. background-color: green;
14. }

运行代码保存代码提示：您可以先修改部分代码再运行!power by W3Cfuns.com

前面有说到一般我都是用的flex伸缩盒，那也来说一下用flex怎么实现的吧
6.flex伸缩盒方法
即父标签设置display:flex属性，自适应元素设置flex-grow:1;
HTML代码

3. 我是左栏
6. 我是右栏

CSS代码

1. html,body,div{
2. margin: 0;
3. padding: 0;
4. }
5. .wrap{
6. display: flex;
7. display: -webkit-flex;
8. }
9. .wrap_left{
10. width: 200px;
11. background-color: red;
12. }
13. .wrap_right{
14. flex-grow:1;
15. -webkit-flex-grow:1;
16. background-color: green;
17. }

运行代码保存代码提示：您可以先修改部分代码再运行!power by W3Cfuns.com

进阶
二、三栏布局
掌握了上面的方法，我们会发现制作一个三栏布局也是非常容易的。
下面我们在上面栗子的基础上，看看实现一个两侧定宽，中间自适应的三栏布局如何实现
1. float + margin（两侧定宽，中间自适应）
HTML代码：

2. 我是左栏
5. 我是右栏
8. 我是中间栏

CSS代码：

1. html,body,div{
2. margin: 0;
3. padding: 0;
4. }
5. .wrap_left{
6. width: 200px;
7. float: left;
8. background-color: red;
9. }
11. .wrap_content{
12. margin-left: 220px;
13. margin-right: 220px;
14. background-color: yellow;
15. }
16. .wrap_right{
17. width: 200px;
18. float: right;
19. background-color: green;
20. }

运行代码保存代码提示：您可以先修改部分代码再运行!power by W3Cfuns.com

2. position + margin（两侧定宽，中间自适应）
HTML代码：

2. 我是左栏
5. 我是右栏
8. 我是中间栏

CSS代码

1. html,body,div{
2. margin: 0;
3. padding: 0;
4. }
5. .wrap_left{
6. width: 200px;
7. position: absolute;
8. background-color: red;
9. left: 0;
10. }
12. .wrap_content{
13. margin-left: 220px;
14. margin-right: 220px;
15. background-color: yellow;
16. }
17. .wrap_right{
18. width: 200px;
19. position: absolute;
20. right: 0;
21. background-color: green;
22. }

运行代码保存代码提示：您可以先修改部分代码再运行!power by W3Cfuns.com

3.float + 负margin（两侧定宽，中间自适应）
HTML代码

3. 我是中间栏
7. 我是左栏
10. 我是右栏

CSS代码

1. html,body,div{
2. margin: 0;
3. padding: 0;
4. }
5. .wrap{
6. float: left;;
7. width: 100%;
8. }
9. .wrap_left{
10. width: 200px;
11. float: left;
12. margin-left: -100%;
13. background-color: red;
15. }
17. .wrap_content{
18. margin-left: 220px;
19. margin-right: 220px;
20. background-color: yellow;
21. }
22. .wrap_right{
23. width: 200px;
24. float: left;
25. margin-left: -200px;
26. background-color: green;
27. }

运行代码保存代码提示：您可以先修改部分代码再运行!power by W3Cfuns.com

4.table实现

运行代码保存代码提示：您可以先修改部分代码再运行!power by W3Cfuns.com

5.BFC方法
HTML代码

2. 我是左栏
5. 我是右栏
8. 我是中间栏

CSS代码

1. html,body,div{
2. margin: 0;
3. padding: 0;
4. }
6. .wrap_left{
7. float: left;
8. width: 200px;
9. background-color: red;
10. }
11. .wrap_right{
12. float: right;
13. width: 200px;
14. background-color: green;
15. }
16. .wrap_content{
17. overflow: hidden;
18. background-color: yellow;
19. }

运行代码保存代码提示：您可以先修改部分代码再运行!power by W3Cfuns.com

注：HTML中先写定宽元素，再写自适应宽度元素。

6.flex伸缩盒
即父标签设置display:flex属性，自适应元素设置flex-grow:1;
HTML代码

3. 我是左栏
6. 我是中间栏
9. 我是右栏

CSS代码

1. html,body,div{
2. margin: 0;
3. padding: 0;
4. }
5. .wrap{
6. display: flex;
7. display: -webkit-flex;
8. }
9. .wrap_left{
10. width: 200px;
11. background-color: red;
12. }
13. .wrap_right{
14. width: 200px;
15. background-color: green;
16. }
17. .wrap_content{
18. flex-grow:1;
19. -webkit-flex-grow:1;
20. background-color: yellow;
21. }