DIV+CSS 自适应布局

两栏布局，左边定宽200px，右边自适应。如何实现？
我的第一个反应就是：用flex伸缩盒呀，然后balabala...
说完之后，面试官说，还有没有别的方法？flex有些浏览器不支持
嗯...我愣了一下，平常遇到这种问题貌似都是这么写的...
别的方法？我又想了想。JS?对，JS肯定可以。
然后就说，可以用JS获取当前窗口宽度，然后减去200px就是右边的宽度了
面试官：嗯，这样的确可以，但是布局一般不要用JS，还有没有别的方法？CSS的
额，这下我完全愣住了好嘛，人也变得有些紧张。还要别的方法啊，什么方法呢？？？
哎呀妈呀，想不出来，肿么办...
然后面试官看了我半天，十分体谅的说，那我们进行下一个问题吧...
（以上面试官原话记不大请了，但是意思就是这样~）

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

---

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

1.     <div class="wrap">
2.             <div class="wrap_left">
3.                     我是左栏
4.             </div>
5.             <div class="wrap_right">
6.                     我是右栏
7.             </div>
8.     </div>

复制代码

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.                 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代码

1.     <div class="wrap">
2.             <div class="wrap_left">
3.                     我是左栏
4.             </div>
5.             <div class="wrap_right">
6.                     我是右栏
7.             </div>
8.     </div>

复制代码

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.                 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代码

1. <div class="wrap">
2.             <div class="wrap_right">
3.                     我是右栏
4.             </div>
5.     </div>
6.            <div class="wrap_left">
7.                     我是左栏
8.     </div>

复制代码

CSS代码

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

复制代码

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

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

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

1. <table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
2.     <tr>
3.         <td width="200" bgcolor="red"></td>
4.         <td bgcolor="green"></td>
5.     </tr>
6. </table>

复制代码

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

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


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

1.         <div class="wrap_left">
2.                 我是左栏
3.         </div>
4.         <div class="wrap_right">
5.                 我是右栏
6.         </div>

复制代码

CSS代码：

1.         html,body,div{
2.                 margin: 0;
3.                 padding: 0;
4.         }
5.         
6.         .wrap_left{
7.                 float: left;
8.                 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代码

1.     <div class="wrap">
2.                 <div class="wrap_left">
3.                         我是左栏
4.                 </div>
5.             <div class="wrap_right">
6.                         我是右栏
7.                 </div>
8.         </div>

复制代码

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.                 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代码：

1.         <div class="wrap_left">
2.                     我是左栏
3.         </div>
4.             <div class="wrap_right">
5.                     我是右栏
6.             </div>
7.         <div class="wrap_content">
8.             我是中间栏
9.         </div>

复制代码

CSS代码：

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

复制代码

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

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

1. <div class="wrap_left">
2.                 我是左栏
3.     </div>
4.         <div class="wrap_right">
5.                 我是右栏
6.         </div>
7.     <div class="wrap_content">
8.         我是中间栏
9.     </div>

复制代码

CSS代码

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

复制代码

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

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

1. <div class="wrap">
2.             <div class="wrap_content">
3.                 我是中间栏
4.             </div>
5.     </div>
6.     <div class="wrap_left">
7.                 我是左栏
8.     </div>
9.         <div class="wrap_right">
10.                 我是右栏
11.         </div>

复制代码

CSS代码

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

复制代码

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

4.table实现

1.         <table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
2.     <tr>
3.         <td width="200" bgcolor="red"></td>
4.         <td bgcolor="yellow"></td>
5.         <td width="200" bgcolor="green"></td>
6.     </tr>
7.     </table>

复制代码

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

5.BFC方法
HTML代码

1.         <div class="wrap_left">
2.                 我是左栏
3.         </div>
4.     <div class="wrap_right">
5.                 我是右栏
6.         </div>
7.         <div class="wrap_content">
8.                 我是中间栏
9.         </div>

复制代码

CSS代码

1.         html,body,div{
2.                 margin: 0;
3.                 padding: 0;
4.         }
5.         
6.         .wrap_left{
7.                 float: left;
8.                 200px;
9.                 background-color: red;
10.         }
11.         .wrap_right{
12.                 float: right;
13.                 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代码

1.     <div class="wrap">
2.                 <div class="wrap_left">
3.                         我是左栏
4.                 </div>
5.                 <div class="wrap_content">
6.                         我是中间栏
7.                 </div>
8.             <div class="wrap_right">
9.                         我是右栏
10.                 </div>
11.         </div>

复制代码

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.                 200px;
11.                 background-color: red;
12.         }
13.         .wrap_right{        
14.                 200px;
15.                 background-color: green;
16.         }
17.         .wrap_content{
18.                 flex-grow:1;
19.                 -webkit-flex-grow:1;
20.                 background-color: yellow;
21.         }

复制代码