CSS 网格实现瀑布流
2021-01-16 23:13
阅读：516
YPE >
标签：形式 count content 内容 ini initial oid lan 列表
瀑布流布局其核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的（随着自己内容动态变化高度），同时每个项目列表呈堆栈形式排列，最为关键的是，堆栈之间彼此之间没有多余的间距差存大。
代码比较简单：
html>
* {
margin: 0;
}
.pu {
margin: 0 auto;
column-count: 5; /*分为5列 自己设置*/
column-width: 300px; /*设置列宽,即是每列的宽度*/
column-gap: 10px; /*每列和每行的间距为10px 是 column-gap: 10px; row-gap: 10px; 的缩写*/
}
.inner {
break-inside: avoid; /*避免分隔符分开图片*/
margin-bottom: 10px;
}
img {
width: 100%;
}
当然也可以用flex 布局，不过使用flex会比较麻烦。
CSS 网格实现瀑布流
标签：形式 count content 内容 ini initial oid lan 列表
原文地址：https://www.cnblogs.com/ximenchuifa/p/13374226.html
下一篇：HTTP协议详解（真的很经典）
评论
亲，登录后才可以留言！