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值就需要设置元素浮动，不然会出现两列元素顶部对不齐的问题

 

转载于:https://www.cnblogs.com/xiaofenguo/p/10304867.html