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

巴特西

CSS3多列

最新文章

热门文章