.someone{
height:400px
background-color:red
}
.left{
float:left
width:100px
background-color:green
}
.right{
float:right
width:200px
background-color:blue
}
.center{
margin : 0px 200px 0px 100px
background-color:black}
</style>
<body>
<div class="someone">
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中</div>
</div>
</body>
楼上的中间部分长度是 someone的长度减去left的长度 右边部分被挡住了而已
我理解不符合楼主要求吧...
<div style="float:leftwidth:300pxheight:200pxbackground:red">第一列</div><div style="float:leftwidth:300pxheight:200pxbackground:blue">第二列</div>
<div style="float:rightwidth:300pxheight:200pxbackground:green">第三列</div>
此处的注释为去掉换行符的影响.wrapper
{
width:
100%
/*
也可以固定宽度
*/
height:
200px
}
.wrapper
>
div
{
display:
inline-block
/*
如需支持ie8以下版本，用浮动来做
*/
width:
calc(100%
/
3)
/*
此处运用了一个css3的表达式，将div三等分，ie8及以上可以支持，当然也可以根据需要设置固定值
*/
width:
-webkit-calc(100%
/3)
width:
-moz-calc(100%
/
3)
height:
100%
}
以上经亲自测过，ie8+、chrome、firefox表现良好。
