CSS3多列

CSS3多列，通过创建列对页面内容进行布局，轻松实现类似Pinterest、花瓣的瀑布流式布局。

主要包含：

column-count 列数
column-gap 列间宽度
column-rule 列间分隔样式

 1 <style>
 2     #imgGrid{
 3         -webkit-column-count: 3;
 4         -webkit-column-gap: 40px;
 5         -moz-column-count: 3;
 6         -moz-column-gap: 40px;
 7         column-count: 3;
 8         column-gap: 40px;
 9 
10         -moz-column-rule:10px dotted #ff0000; /* Firefox */
11         -webkit-column-rule:10px dotted #ff0000; /* Safari and Chrome */
12         column-rule:10px dotted #ff0000;
13 
14     }
15 
16     #imgGrid img{
17         width:100% !important;
18         height:auto !important;
19         margin-bottom: 10px;
20     }
21 </style>
22 
23 <div id="imgGrid">
24         <img src="image/slide4.png" />
25         <img src="image/slide1.png" />
26         <img src="image/4567.jpg" />
27         <img src="image/1234.png" />
28         <img src="image/slide1.png" />
29         <img src="image/news.png" />
30 </div>

效果：

对比布局方式flexbox伸缩盒模型

http://www.51xuediannao.com/qd63/index.php/page-3-86-1.html