瀑布流布局(两列)"/>
CSS实现照片卡片瀑布流布局(两列)
1.问题:
今天遇到了需要实现一个卡片的瀑布流布局的问题,卡片高度是不同的。
最后使用css3中的column属性实现了这个布局,而且非常的简便啊(lz隐约记得上次写瀑布流的时候是用js实现的…naive啊)
实现效果大概如下图~
2.实现方法
// 外层DIV
.PhotoWall {/*margin-bottom: 60px;*/column-gap: 10px; // 卡片间距column-count: 2; // 卡片列数/*margin: 10px 10px 40px;*/}
// 照片卡片
.all {break-inside: avoid; // 不设置这个,卡片会被拦腰截断margin-bottom: 10px;border-style: outset;border-color: #DDDDDD;}
更多推荐
CSS实现照片卡片瀑布流布局(两列)
发布评论