最终效果如图

这是一个80px * 80px 的 矩形小方格。

刚开始考虑的时候就想着，全部用浮动就好了嘛，后来突然想到就建9个div，全部浮动就排一行了

后来想了一下要是能用表格做肯定容易多了，于是就想到表格的行与列，想着建立三个长方形的div包着3个矩形div就好了嘛

中间编写过程中因为计算，有点懵逼了，还有就是本来想着利用外边距合并这个方法做，第一次写的时候，忘记水平外边距不会合并，只好把建立三行改成建立三列了，最后做出来以后我又转回去尝试三行，也成功做出来了，附上代码：

【   方法一  3列   】

HTML

  <div id="bigBox">

    <div class="line">

 <div class="smallBox"></div>

 <div class="smallBox"></div>

 <div class="smallBox"></div>

</div>

    <div class="line">

 <div class="smallBox"></div>

 <div class="smallBox"></div>

 <div class="smallBox"></div>

</div>

    <div class="line">

 <div class="smallBox"></div>

 <div class="smallBox"></div>

 <div class="smallBox"></div>

    </div>

  </div>

CSS

#bigBox {

width:255px;

height:260px;

background:#fff;

margin:0 auto;

padding:12.5px 15px;

box-shadow:0 0 5px #ccc;

}

#bigBox .line {

width:80px;

height:260px;

background:#fff;

margin:auto 2.5px;

float:left;

}

#bigBox .line .smallBox{

width:80px;

height:80px;

background:#e8830d;

margin:5px 0;

border-radius:5px;

}

 【   方法二  3行   】

HTML

   <div id="bigBox">

    <div class="line">

 <div class="smallBox"></div>

 <div class="middleBox"></div>

 <div class="smallBox"></div>

</div>

    <div class="line">

 <div class="smallBox"></div>

 <div class="middleBox"></div>

 <div class="smallBox"></div>

</div>

    <div class="line">

 <div class="smallBox"></div>

 <div class="middleBox"></div>

 <div class="smallBox"></div>

    </div>

  </div>

CSS

#bigBox {

width:250px;

height:260px;

background:#fff;

margin:0 auto;

padding:10px 15px;

box-shadow:0 0 5px #ccc;

}

#bigBox .line {

width:250px;

height:80px;

background:#fff;

margin:5px auto;

}

#bigBox .line div{

width:80px;

height:80px;

background:#e8830d;

float:left;

border-radius:5px;

}

#bigBox .line div.middleBox{

margin:0 5px;

}

 方法2的CSS有一个奇怪的地方我不是很能理解，最外面的白色框的宽和高，只能设置成250px，260px，然后内边距设为上下10px，左右15px。这样算起来就是30+250=280，20+260=280，外面的白色框看起来就会是正方形了。但是一旦设置成宽高一样的250px，内边距全部一样是15px，即使计算起来是一样的，但是在浏览器检查的时候就会变成，里面的橙色框向下移动了几个px，但是正方形的大小还是没有改变的。