margin负值法：实现三栏布局中间自适应。废话不说上代码：
此处是css代码
*{
margin:0;
padding:0;
}
.main{
width:100%;
height:500px;
float:left;
}
.main .body{
margin:0 200px;
background:blue;
height:500px;
}
.left,.right{
width:200px;
height:500px;
float:left;
background:red;
}
.left{
margin-left:-100%;
}
.right{
margin-left:-200px;
}附上HTML代码
中
左
右 此处的html代码顺序是要固定的。上图应该更好理解吧~
文章图片
还有大家耳熟能详的一个方法：自身浮动法，这个也是最好理解的了，图就不上了，直接上代码
*{
margin:0;
padding:0;
}
.main{
margin:0 200px;
background:#66ff33;
}
.left,.right{
width:200px;
height:500px;
background:#9900ff;
}
.left{
float:left;
}
.right{
float:right;
}
html的：
左
右
中【实现三栏布局中间自适应（二）】当然这种方法不能调main的位置，不然它就会将其他的div挤下来。原因嘛，当然是因为main没有设置浮动，它还是个块元素，独自霸占一行。。。就酱。还有别的方法再说，先总结。
