css布局：多列等高布局

多列等高布局是在一个容器里面，并排的多列，若是内容的高度没法在一开始肯定（例如内容是动态的），又须要让各列天然地撑开（不出现每列里面的滚动条），这时候须要用css或者js的方法把各列高度设置为最高列的高度。这里咱们介绍纯css实现方法。

程序代码：

<div id="container">
　　<div class="col">
　　　　<img src="trend.png">
　　　　<h1>Trend</h1>
　　      <p>The tool refers to periodic trends for collecting and analyzing weak signals and trends in chemistry.</p>
　　</div>
　　<div class="col">
　　　　<img src="user.png">
　　　　<h1>User</h1>
　　　　<p>User namespaces are now fully implemented as of document is obsolete.</p>
　　</div>
　　<div class="col">
　　　　<img src="picture.png">
　　　　<h1>Picture</h1>
　　　　<p>Taking good pictures is something anyone can do with any camera, if you practice enough and avoid some common mistakes..</p>
　　</div>

</div>

这时候用浮动布局让三个col并列：

.col {
　　float: left;
　　width: 33.33%;
　　padding: 20px;
　　color: #fff;
　　text-align: center;
　　background: #2980b9;
}

能够看到出现这样三列：由于内容区域的大小不一样致使高度不一样。若是内容区域是动态的，咱们也不可以直接把高度都设置成最高的那列。

这时候，咱们给col增长样式：

padding-bottom: 500px;

出现的效果是：红色表明父元素，蓝色表明子元素原来的内容，也就是父元素和子元素都由于padding被撑开了。

这时，再给col增长样式
margin-bottom: -500px;

这时候，至关于三个子元素都超出父元素边界500px，也就是父元素的border-bottom往上移动500px，恰好到了最长元素的内容区域。

这时候再给父元素设置overflow:hidden就能够把黄色下面的区域隐藏掉，实现三列等高布局。

多列等高布局的一个解决思路就是：先给几个子元素设置一个比较大的padding-bottom和一个等值的负数margin-bottom，也就是至关于在父元素溢出了，这时候再从父元素那里设置overflow:hidden，就能够裁剪掉溢出的部分。而且是最高的元素溢出最多，这时候隐藏掉溢出的部分，并行的列就都等高了。