<div id="left" style="float:left width:20pxheight:20px padding-right:10px">
<div id="l1"></div>
<div id="l2"></div>
<div id="l3"></div>
</div>
<div id="middle" style="float:left width:20pxheight:20px padding-right:10px">
<div id="m4"></div>
<div id="m5"></div>
<div id="m6"></div>
</div>
<div id="right"style="float:left width:20pxheight:20px padding-right:10px">
<div id="r7"></div>
<div id="r8"></div>
<div id="r9"></div>
</div>
</div>
思路，一个大div main里面放三个小div 左中右
左边放三个div 左1左2左3，float左浮动。一定要设置长宽，这样才能浮动。
同理 中间放三个，右边放三个。。
这个还是得用到float的。只是定义下ul的宽度就行了。用两个类<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul{margin:0padding:0list-style:nonedisplay:blockwidth:300px}
.l1{float:leftwidth:150pxoverflow:hidden}
.r2{float:left}
</style>
</head>
<body>
<ul>
<li class="l1">11111111</li>
<li class="r2">aaaaaaa</li>
<li class="l1">222222</li>
<li class="r2">bbbbbbb</li>
<li class="l1">33333</li>
<li class="r2">ddddddd</li>
<li style="clear:both"></li>
</ul>
</body>
</html>
根据要求改改，不懂的再向我提问
好像不能靠下面，你可以选择最上面得给它个上边界，它上面就会有空细了，边界是边框与外界得距离，填充是内部文字与外界得距离，还有div最好都给它们设数值，只要掌握好数值了，一切ok了，希望可以帮到你，祝你成功
