发表于: 2016-05-28 16:24:58
1 1425
最终效果如图
这是一个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,但是正方形的大小还是没有改变的。
评论