CSS3多列

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

主要包含：

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

<style>
    #imgGrid{
        -webkit-column-count: 3;
        -webkit-column-gap: 40px;
        -moz-column-count: 3;
        -moz-column-gap: 40px;
        column-count: 3;
        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="image/slide4.png" />
        <img src="image/slide1.png" />
        <img src="image/4567.jpg" />
        <img src="image/1234.png" />
        <img src="image/slide1.png" />
        <img src="image/news.png" />
</div>

效果：

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

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