css 瀑布流样式的三种方法

可以有多列,每一个item(单元格)的高度可以不相同,但是宽度必须一样.排列的方式是,从左往右排列,哪一列现在的总高度最小,就优先排序把item(单元格)放在这一列.这样排完所有的单元格后,可以保证每一列的总高度都相差不大,不至于,有的列很矮,有的列很高.这样就很难看了 

一、

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

2、column-width 规定列宽

3、column-gap 规定列间隙

4、break-inside: avoid; 避免元素内部断行并产生新列

注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。

1 convallis timestamp







2 convallis timestamp 2 Donec a fermentum nisi. 







3 Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis

nunc convallis quis aliquam mauris suscipit.







 4 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. 









 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.







1 convallis timestamp







2 convallis timestamp 2 Donec a fermentum nisi. 







3 Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis

nunc convallis quis aliquam mauris suscipit.







 4 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. 









 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.

还有一种就是控制数据的索引值来让数据放到左边还是右边

二、float属性  相对不合适

三、flex属性  相对不合适

原文地址：http://www.cnblogs.com/tinyphp/p/6221523.html