前两天看到一个面试题，说是让实现三栏布局，中间的自适应，如下图所示：
文章图片
其实挺简单的，但是换下顺序，有好多人就懵逼了，包括我。。。。这里我总结两种方法来实现：
第一种~定位法：（css代码）
*{
margin:0;
pading:0;
}
.container{
width:100%;
height:100%;
position:relative;
margin:0;
padding:0;
}
.left{
width:200px;
height: 200px;
position: absolute;
background:blue;
top:0;
left:0;
overflow: hidden;
}
.right{
width:200px;
height: 200px;
position: absolute;
background:yellow;
top:0;
right:0;
overflow: hidden;
}
.main{
height:200px;
background:red;
width:auto;
}
html代码如下：
main
left
right
这样无论html中main、left、right三个顺序怎么变换都可以实现如上布局了~
当然还有另一种方法~ 包裹法（其实我也不知道叫啥，形象点叫吧ㄟ(▔ ,▔)ㄏ）
此处附上相应的css代码
*{
margin:0;
padding:0;
}
.container{
width:100%;
height:100%;
margin:0,auto;
}
.main1{
float:left;
width:500px;
}
.left{
float:left;
width:200px;
background:red;
}
.main{
float:right;
width:auto;
background:#996699;
}
.right{
width:300px;
float:right;
background:blue;
}html代码如下：
main
left
right
【实现三栏布局中间自适应】这种方法不太好理解，简单点说就是用浮动的方法将三个布局想办法变成两个布局，然后让包裹两个的再重新实现两列布局，就变成三列布局了
文章图片
剩下的几种情况这里就不一一说明了，不过还是推荐第一种方法，不用改html里的代码，（表示本人比较懒(/”≡ _ ≡)=）
