昨天被问到一个面试题:怎么实现四列等分布局,每列之间有间距,但是第一列和最后一列与窗口之间没有间距?
当时想的是直接获取宽度减去各个margin值然后除以4,最后去掉两端的间距就好了。但是面试官说要用到box-sizing实现。。。回来后就试了一下。
body结构:
<div class="parent">
<p class="one">第一列</p>
<p class="two">第二列</p>
<p class="three">第三列</p>
<p class="four">第四列</p>
</div>
分析:
如果直接给p设置width为25%,然后设置间距,这样会使一排排不下,最后一个p会被挤到换行,所以要设置p的box-sizing为border-box,使width的值以IE盒子模型的标准解析,即width=border+padding-left+padding-right+content,然后通过设置内边距来产生间距,最后通过设置parent的左右margin为负值来抵消两侧的间距。
实现:
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.parent{
margin: 0 -10px; /*去掉第一个和最后一个div与窗口之间的间距*/
}
p{
box-sizing: border-box; /*以IE盒子模型的width为标准*/
padding: 0px 10px; /*设置div的内边距*/
width: 25%; /*div等分成4部分*/
height: 100px;
float: left;
background-clip: content-box; /*背景色用于内容*/
}
.one{
background-color: red;
}
.two{
background-color: blue;
}
.three{
background-color: green;
}
.four{
background-color: yellow;
}
</style>
结果:
在网上还搜到其他的实现方法,这里给出链接:
http://www.cnblogs.com/xiaohuochai/p/5456695.html