css3 實現瀑布流

掌握點：

1、column-count 把div中的文本分為多少列

2、column-width 規定列寬

3、column-gap 規定列間隙

4、break-inside: avoid; 避免元素內部斷行並產生新列

注意: Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。

/*container 分為兩列 間距20px,item元素寬度 344px*/

.container{　

-moz-column-count:2; /* Firefox */

-webkit-column-count:2; /* Safari 和 Chrome */

column-count:2;

-moz-column-gap: 20px;

-webkit-column-gap:20px;

column-gap: 20px;

column-width:344px;

}

/**/

.item{
      -moz-page-break-inside: avoid;
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
　　　　float:left;
　　　　margin-bottom:30px;
    }

<div class="container">

　　<div class="item"></div>

</div>

 

 

tip:如果設置元素之間的margin-bottom值就需要設置元素浮動，不然會出現兩列元素頂部對不齊的問題