DIV容器里面放上x*x的小方块的两种实现方法

  1:小方块相对定位
  [HTML代码]
     <div id="box_container">
        <div class="grid" id="grid-0-0">1</div>
        <div class="grid" id="grid-0-1">2</div>
        <div class="grid" id="grid-0-2">3</div>
        <div class="grid" id="grid-1-0">4</div>
        <div class="grid" id="grid-1-1">5</div>
        <div class="grid" id="grid-1-2">6</div>
        <div class="grid" id="grid-2-0">7</div>
        <div class="grid" id="grid-2-1">8</div>
        <div class="grid" id="grid-2-2">9</div>
        <div class="grid" id="grid-3-0">10</div>
        <div class="grid" id="grid-3-1">11</div>
        <div class="grid" id="grid-3-2">12</div>
    </div>
    [CSS代码]
        #box_container{
            width: 306px;
            height: 407px;
            margin: 50px auto;
            background-color: #55d769;
            border: 5px solid #000;
            position: relative;
         }
    [注意的点]
    1:相对定位时,小方块的边框是不会重叠到一起的,各自有各自的位置,所以三个方块有六条边正好宽多出6px
.grid {
    width: 100px;
    height: 100px;
    background-color: #fff;
    border: 1px solid #000;
    position: relative; //
display:inline  ;  //块级元素一定要变成内联元素,不然等会一行一个方块
float: left;           //左浮动也是必须的,这样就会自己一个一个排开了
 }

  2:小方块绝对定位
   [HTML代码]
  <div id="box_container">
        <div class="grid" id="grid-0-0">1</div>
        <div class="grid" id="grid-0-1">2</div>
        <div class="grid" id="grid-0-2">3</div>
        <div class="grid" id="grid-1-0">4</div>
        <div class="grid" id="grid-1-1">5</div>
        <div class="grid" id="grid-1-2">6</div>
        <div class="grid" id="grid-2-0">7</div>
        <div class="grid" id="grid-2-1">8</div>
        <div class="grid" id="grid-2-2">9</div>
        <div class="grid" id="grid-3-0">10</div>
        <div class="grid" id="grid-3-1">11</div>
        <div class="grid" id="grid-3-2">12</div>
    </div>
    [CSS代码]
    #box_container{
    width: 302px;
    height: 402px;
    margin: 50px auto;
    background-color: #55d769;
    border: 5px solid #000;
    position: relative;
    }


.grid {
    width: 100px;
    height: 100px;
    background-color: #fff;
    border: 1px solid #000;
    position: absolute;
}
    [JS代码]
因为绝对定位所以要给每个小方块设置距离父容器的左边距和上边距,可以在CSS中单独设置也可以根据一定的规律使用JS脚本语言进行设置!
    for(var i=0;i<4;i++){
        for(var j=0;j<3;j++){
            var block = $("#grid-"+i+"-"+j);
            block.css("top",i*100);
            block.css("left",j*100);
        }
    } 
    由此可见规范的命名是多么的重要,bootStrap中html的Class名称规范大量用到英文+数字命名就是为了JS处理时简单方便而命名的!
    [注意的点]
    1:绝对定位时,方块的边框会重叠到一起的,第一个方块的边和父容器的边框重合,第一个方块的右边和第二个方块的左边重合,第二个方块的右边又和第三个方块的左边重合,第三个方块的右边和父容器的边框重合。所以最后只会有两条边被显示出来，所以容器的宽度为302px,多出的是中间两条边的重合1px。

    [总结]
    1:相对定位和绝对定位时最外层容器的大小不一样,可以根据实际需要来使用不同的定位方式
    2:HTML的id或者class属性值有技巧的命名可以方便供JS脚本语言处理