发表于: 2016-05-28 16:24:58

1 1423


                       最终效果如图

这是一个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,但是正方形的大小还是没有改变的。


返回列表 返回列表
评论

    分享到