css3瀑布流

以前使用瀑布流都要用js,现在有了css3,可以轻松实现了。

掌握点:

1,2,3写在循环的外部

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

2、column-width 规定列宽

3、column-gap 规定列间隙

4、break-inside: avoid; 避免元素内部断行并产生新列(在item中书写)

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

在item中需要的css不要用margin-bottom,不然第一列的最后一个元素会影响到第二列的第一个元素

把margin改成padding即可解决的

 

posted @ 2021-06-23 15:09  艺术就是派大星_s  阅读(56)  评论(0)    收藏  举报