开门见山，先来一张效果图：
我写的盒子模型只要修改一个参数就可以控制一行图片放几张，每张间的间距等等。
还是直接上代码。
box.html
<meta charset="UTF-8"/> <title>盒子模型2</title> <link rel="stylesheet" type="text/css" href="box2.css"> </head> <body> <!-- div1在布局中起到一个控制整个内容显示的位置作用 --> <div class="div1"> <!-- ul在布局中作用是可以控制显示内容的多少 --> <ul class="faceul"> <li> <img src="2.PNG"/> </li> <li> <img src="2.PNG"/> </li> <li> <img src="2.PNG"/> </li> <li> <img src="2.PNG"/> </li> <li> <img src="2.PNG"/> </li> <li> <img src="2.PNG"/> </li> </ul> </div> </body> </html>
.div1
{
width: 900px;
height: 300px;
border: 1px solid blue;
margin: 5px 0px 0px 5px;
/*padding-top: 80px;*? /* 注意：padding会将盒子撑破 */
padding-left: 0px;
}
.faceul
{
width: 500px; /* 控制一行有几个 */
height: 250;
border: 1px solid red;
padding-left: 0px; /* 让li可以靠近ul */
margin-left: 5px;
}
.faceul li
{
list-style-type: none;
float: left; /* 左浮动 */
width: 100px;
height: 100px;
border: 1px solid red;
margin-right: 5px;
margin-top: 5px;
}
.faceul li img
{
width: 90px;
height: 90px;
margin-left: 5px;
margin-top: 5px;
}
原文地址：http://blog.csdn.net/chenqiai0/article/details/42815981
