资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

纯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://cdkjz.cn/article/peihpj.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:400-028-6601 / 大客户专线   成都:13518219792   座机:028-86922220