创新路
我们一直在努力

CSS实现瀑布流布局

如代码:

<ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>    

一般给li添加css:float: left;可以自动靠左排序

image.png

但是当 li 高度不一样的时候就会很丑,还有空隙:

image.png

所以我们可以使用纯css实现瀑布流效果:

1573097184754733.png

只需给 容器添加css:

ul{

-moz-column-count: 3;

-webkit-column-count: 3; 

column-count: 3; 

-moz-column-gap: 0;

-webkit-column-gap: 0; 

column-gap: 0; 

}

给容器里的元素添加css:

ul li{

-moz-page-break-inside: avoid;

-webkit-column-break-inside: avoid; */

break-inside: avoid;

效果如下:

1573097393746053.png

未经允许不得转载:天府数据港官方信息博客 » CSS实现瀑布流布局

客官点个赞呗! (0)
分享到:

评论 抢沙发

评论前必须登录!

天府云博 - 做有态度的开发&运维&设计学习分享平台!

联系我们百度云主机