css三列布局
参考：http://itindex.net/detail/40705-css-%E5%B8%83%E5%B1%80
css三列布局
两个很好的方法解决这个问题：
1：css2传统方法，让第一个盒子左浮动，第二个盒子右浮动，且都设置好固定宽度，中间第三个盒子只设置一下高度，不要设置宽度或者设置宽度为auto，中间盒子就会去自适应宽度，看一下代码
<html>
<head>
<style type="text/css">
body{margin:0;}
.left{
width:180px;
height:500px;
float:left;
background:#F39;
}
.right{
width:300px;
height:500px;
float:right;
background:#F99;
}
.center{
width:auto;
height:500px;
margin-left:190px;
margin-right:310px;
background:#33C;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>
这里要绝对要注意的就是center这个盒子的margin-left和margin-right，他们是到父容器的左边框和右边框的距离，不是到左边盒子和右边盒子的距离，意思就是center这个盒子的margin-left=190一定要大于left这个盒子的宽width=180,不然他们就会重叠。同理右边
2：用css3的box-flex属性，css3增加了这个属性之后，更方便了，可以不用定义浮动了
<html>
<head>
<style type="text/css">
body{margin:0;}
.box{
display:box;
display:-webkit-box;
display:-moz-box;
background-color:#fff;
width:auto;
height:500px;
border:1px solid #333;
}
.left{
background-color:#f39;
width:182px;
height:500px;
}
.right{
background-color:#f99;
width:300px;
height:500px;}
.center{
background-color:#33c;
box-flex:2;
-moz-box-flex:2;
-webkit-box-flex:2;
margin:0 10px;}</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
这里要注意的是因为css3还没有统一，各个浏览器在 box-flex属性上有自己的定义方式， -moz-box-flex是火狐的， -webkit-box-flex是chrome和safari的，必须全部定义，假如定义chrome的，到了火狐上就不兼容没效果。 box-flex属性，盒子固定宽度就以固定宽度显示，如果没有固定宽度，就自适应宽度，比如 box-flex:2就是自适应，当然2的意思就是父容器总宽度的2份，假如左盒子是1中间是2右边是2，父容器总宽度为500PX，那么左边就是100PX中间是200PX右边是200PX。当然，这里的 box-flex:2可以随便写，因为左右盒子的宽度固定了，浏览器会认为中间盒子的宽度就是剩下的宽度了，设置一个2不起作用了。还有一个要注意的是，这里要注意盒子的顺序，严格的左中右来，如果像第一种方法那样先引用right样式在引用center样式的话，就会变成，左盒子和中盒子固定宽度，右盒子自适应宽度了
