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，就能夠裁剪掉溢出的部分。而且是最高的元素溢出最多，這時候隱藏掉溢出的部分，並行的列就都等高了。