很常见的一种布局：
有容器A，里边排1~6，六个小层，每行3个
实现：两侧的小层和容器的左右边缘对齐，中间间隔10像素，而这六个小层是循环的，都用同一个样式
解决这个问题的关键因素是：
1> .list 的宽度设置成需要的宽度，这里为320px,因为下面3个li的宽度和 中间间距一起是320px,可以加上overflow:hidden;不过不加也不会有问题，已测试
2> .list ul 的宽度设置为330px ，这样好容纳一行3个li的宽度
举例说明：
<!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/html; charset=utf-8" /> <title>无标题文档</title> <style> *{margin:0;padding:0} ul{list-style:none} .list{overflow:hidden;width:320px;background:#CCCCCC} .list ul{width:330px} .list ul li{float:left;width:100px;height:100px;line-height:100px;margin: 0 10px 10px 0 ;background:#FF6600;text-align:center;color:#fff} </style> </head> <body> <div class="list"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </body> </html>