纯css怎么实现瀑布流

这篇文章主要介绍了纯css怎么实现瀑布流,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

10年积累的网站设计、成都网站制作经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先做网站设计后付款的网站建设流程,更有浦口免费网站建设让你可以放心的选择与我们合作。

1.multi-column多列布局实现瀑布流

先简单的讲下multi-column相关的部分属性

column-count设置列数

column-gap设置列与列之间的间距

column-width设置每列的宽度

还要结合在子容器中设置break-inside防止多列布局,分页媒体和多区域上下文中的意外中断

break-inside属性值

auto指定既不强制也不禁止元素内的页/列中断。

avoid指定避免元素内的分页符。

avoid-page指定避免元素内的分页符。

avoid-column指定避免元素内的列中断。

avoid-region指定避免元素内的区域中断。

截取了部分,可自己填充

/*html文件*/

牵起你的左手护着你

牵起你的左手护着你

牵起你的左手护着你

牵起你的左手护着你

牵起你的左手护着你

/*css样式*/

body{

background:#e5e5e5;

}

/*瀑布流最外层*/

#root{

margin:0auto;

width:1200px;

column-count:5;

column-width:240px;

column-gap:20px;

}

/*每一列图片包含层*/

.item{

margin-bottom:10px;

/*防止多列布局,分页媒体和多区域上下文中的意外中断*/

break-inside:avoid;

background:#fff;

}

.item:hover{

box-shadow:2px2px2pxrgba(0,0,0,.5);

}

/*图片*/

.itemImg{

width:100%;

vertical-align:middle;

}

/*图片下的信息包含层*/

.userInfo{

padding:5px10px;

}

.avatar{

vertical-align:middle;

width:30px;

height:30px;

border-radius:50%;

}

.username{

margin-left:5px;

text-shadow:2px2px2pxrgba(0,0,0,.3);

}

感谢你能够认真阅读完这篇文章,希望小编分享的“纯css怎么实现瀑布流”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


本文标题:纯css怎么实现瀑布流
浏览路径:http://cdiso.cn/article/peihpj.html

其他资讯