CSS3实现瀑布流布局
2019-08-14 09:48:51来源：博客园 阅读 ()
讲干货，不啰嗦，瀑布流布局是种常见的布局方式，常用于图片相关的样式展示，通过CSS3的多列（Multi-column）属性，可以简单的实现类似效果。
具体步骤：
1.设置外部容器多列列数（column-count）和列间距（column-gap）
2.设置内容条目的break-inside属性为avoid，使条目总体不被打断。
HTML结构：
<div class="container"> //最外层容器 <div class="item">//条目 <div class="item__content">//条目内容 <img src=''> </div> </div> <div class="item"> <div class="item__content"> <img src=''> </div> </div> <!-- more items --> ......... </div>
css样式：
.container { column-count: 4; //多列的列数 column-gap: 0;//列间距 } .item{ break-inside: avoid;//避免在主体框中插入任何中断（页面，列或区域）。 }
以上为最核心代码，需要根据具体业务做进一步完善，如添加浏览器前缀，设置元素宽高及位置等等。
原文链接:https://www.cnblogs.com/wwlstc/p/11231160.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- ie8下透明度处理 2020-06-11
- CSS3 2020-06-05
- css：css3（圆角边框、盒子阴影、文字阴影） 2020-06-05
- position: sticky实现导航栏下滑吸顶效果 2020-05-30
- 2.CSS3选择器 2020-05-17
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
