左右浮动边距为0，中间间隔一定

很常见的一种布局：
有容器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>

 

posted @ 2014-12-30 10:58  lanyan  阅读(352)  评论(0)  编辑  收藏  举报