CSS小技巧之多列等高布局

网页开发中经常会遇到下面这样的情景，每个模块的高度不一样，又是不定高，用js动态获取又显得没必要，总结了以下两个小技巧：


一：padding + margin负值的hack法，兼容性良好：

// html
<div class="box">
    <div class="left">
        // some code
    </div>
    <div class="center">
        // some code
    </div>
    <div class="right">
        // some code
    </div>
</div>

// css
.left,right{
    width:20%;
    float:left;
}
.center{
    width:60%;
    float:right;
}

核心代码

.box{
    overflow: hidden;
}
.box>div{
    float: left;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}       

出现这种情况的原因也很简单，就是各个 div 标签中的文字所占高度不同，而且我们并没有明确的给 div 一个高度。

之所以没有给 div 指定高度，是因为我们事先并不知道这个标签会占多高，而且就算我们知道，直接为所有 div 硬性的设置一个高度也是没有灵性的做法。

下面来解释它的工作原理，首先， padding-bottom: 10000px会让三个盒子拉伸的非常高，然后利用 margin-bottom: -10000px将各个元素切割掉 10000px，最后父元素将超出的部分隐藏，就出现了这个效果。

设置完以上代码，现在的情况就变成了这样。


备注： 因为给父元素设置了overflow：hidden;要是子元素有需要超出父元素的情况则会出问题，如子元素有日期插件等。

二：利用 FlexBox

不得不说，上面的方法很好用，不过我们还能够更简洁一点，简洁的让你不敢相信！其实，我们只需要为父布局设置一行就可以了！

.box{
    dispaly:flex;
}

而且，之前在没有利用 flex 的时候，我们为了让三个元素保持在同一行，还不得不为每个 div.item 设置浮动属性。

那么为什么 display: flex 就可以完成以上那么多代码才能够完成的任务呢？这依赖于 align-items 属性，它的默认值是 stretch，也就是在辅轴上将所有子项目拉伸为同一高度（或宽度）以保持对齐。

备注： flex是css3新特性，兼容性不是很好（ie9+/andriod4.3+），大家根据项目实际需求选择使用。