css实现流布局

html结构：

<

 

其中div.masonry是瀑布流的容器，其里面放置了n个列表div.item。为了节约篇幅，上面代码仅列了三个。结构有了，现在来看CSS。在.masonry中设置column-count和column-gap，前者用来设置列数，后者设置列间距：

.masonry { column-count: 2; column-gap: 15px; }

上面控制了列与列之间的效果，但这并不是最关键之处。当初纯CSS实现瀑布流布局中最关键的是堆栈之间的间距，而并非列与列之间的控制（说句实话，列与列之间的控制float之类的就能很好的实现）。找到实现痛楚，那就好办了。或许你会问有什么CSS方法可以解决这个。在CSS中有一个break-inside属性，这个属性也是实现瀑布流布局最关键的属性。

 

.item { break-inside: avoid; box-sizing: border-box; padding: 10px;}

 

 

 

 

---