CSS3多列

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

主要包含：

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

 <style>
     #imgGrid{
         -webkit-column-count:;
         -webkit-column-gap: 40px;
         -moz-column-count:;
         -moz-column-gap: 40px;
         column-count:;
         column-gap: 40px;

         -moz-column-rule:10px dotted #ff0000; /* Firefox */
         -webkit-column-rule:10px dotted #ff0000; /* Safari and Chrome */
         column-rule:10px dotted #ff0000;

     }

     #imgGrid img{
         width:100% !important;
         height:auto !important;
         margin-bottom: 10px;
     }
 </style>

 <div id="imgGrid">
         <img src="data:image/slide4.png" />
         <img src="data:image/slide1.png" />
         <img src="data:image/4567.jpg" />
         <img src="data:image/1234.png" />
         <img src="data:image/slide1.png" />
         <img src="data:image/news.png" />
 </div>

效果：

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

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