<div></div><!-- 此处的注释为去掉换行符的影响
--><div></div><!--
--><div></div>
</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表现良好。
如果你想分2列：.left1{width:100pxfloat:left}
.right1{margin-left100px}
如果你想分3列的：
.left2{width:100pxfloat:left}
.right2{width:100pxfloat:right}
.center2{margin-left:100pxmargin-right:100px}
距离你自己改变，大概也是这么一个结构
只用一个DIV的话 就把其他的DIV改成span就是 不过span是行内样式 你先要定义成块级 其实DIV嵌套比span方便很多,不知道为什么你不用DIV实现.<style>
span {display:block} <!--定义全部span属性为块级-->
#main{width:658pxheight:48px} <!--定义ID为main的DIV块宽度高度-->
#top_left{width:329pxheight:24pxbackground-color: redfloat: left}
<!--定义ID为top_left块的宽度高度以及位置在左边-->
#top_right{width:329pxheight:24pxbackground-color: greenfloat: left}
<!--定义ID为top_right块的宽度高度以及位置在右边-->
#bottom{width:658pxheight:24pxbackground-color: yellowfloat:left}
<!--定义ID为bottom块的宽度高度以及位置-->
</style>
<div id="main">
<span id="top_left"></span>
<span id="top_right"></span>
<span id="bottom"></span>
</div>
自己把背景颜色去掉 我是为了你看清结构~
