解决等高列的方法

https://css-tricks.com/fluid-width-equal-height-columns/

常用方法
1. css3属性 -webkit-linear-gradient
2. 伪类before after
3. table
4. display:table; table-cell
5. one true layout method

<div id="one-true" class="group">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

css:

#one-true{ overflow: hidden; } 
#one-true .col { width: 27%; padding: 30px 3.15% 0; float: left; margin-bottom: -99999px; padding-bottom: 99999px; } 
#one-true .col:nth-child(1) { margin-left: 33.3%; background: #ccc; } 
#one-true .col:nth-child(2) { margin-left: -66.3%; background: #eee; } 
#one-true .col:nth-child(3) { left: 0; background: #eee; } 
#one-true p { margin-bottom: 30px; } /* Bottom padding on col is busy */

1. flexbox method
2. js method

推荐伪类的方法,兼容性好
参考链接
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/backgrounds.html
这个里面可以有间距
http://callmenick.com/post/css-equal-height-columns-three-different-ways
这个里面也提了一些解决方案
http://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum–cms-20403