通过CSS3的column-count和column-gap属性，创建一个响应式的多列布局，实现类似淘宝商品展示的错位效果。在不同屏幕尺寸下，调整列数，保证在手机和平板等小屏幕设备上依然保持良好的视觉体验。
研究了一阵子了，发现个好东西，给大家分享下！
直接上个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
@media screen and (max-width: 800px) {
.masonry {
column-count: 2; // two columns on larger phones
}
}
@media screen and (max-width: 500px) {
.masonry {
column-count: 1; // two columns on larger phones
}
}
.masonry {
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari 和 Chrome */
column-count:2;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
最低0.47元/天 解锁文章
扫一扫
1664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
