实现4列等分布局，每列之间有间距

昨天被问到一个面试题：怎么实现四列等分布局，每列之间有间距，但是第一列和最后一列与窗口之间没有间距？
当时想的是直接获取宽度减去各个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