解决等高列的方法

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 */

flexbox method

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