使用css3怎么实现一个瀑布流布局？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。掌握点：column-count 把div中的文本分为多少列column-width 规定列宽c
使用css3怎么实现一个瀑布流布局？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
掌握点：
column-count 把div中的文本分为多少列
column-width 规定列宽
column-gap 规定列间隙
break-inside: avoid; 避免元素内部断行并产生新列
注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。
column-count 属性规定元素应该被分隔的列数：
div{-moz-column-count:3; -WEBkit-column-count:3; column-count:3;}column-gap 属性规定列之间的间隔：
div{-moz-column-gap:40px; -webkit-column-gap:40px; column-gap:40px;}column-rule 属性设置列之间的宽度、样式和颜色规则：
div{-moz-column-rule:3px outset #ff0000; -webkit-column-rule:3px outset #ff0000; column-rule:3px outset #ff0000;}实例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3瀑布流</title> <style> .container{width:80%;margin: 0 auto;} .waterfall{ -moz-column-count:4; -webkit-column-count:4; column-count:4; -moz-column-gap: 1em; -webkit-column-gap: 1em; column-gap: 1em; } .item{ padding: 1em; margin: 0 0 1em 0; -moz-page-break-inside: avoid; -webkit-column-break-inside: avoid; break-inside: avoid; border: 1px solid #000; } .item img{ width: 100%; margin-bottom:10px; } </style></head><body> <div class="container"> <div class="waterfall"> <div class="item"> <img src="https://file.lsjlt.com/upload/202306/07/o35fzxQtyzd.jpg"> <p>1 convallis timestamp</p> </div> <div class="item"> <img src="Https://file.lsjlt.com/upload/202306/07/nwetg10itnj.jpg"> <p>2 convallis timestamp 2 Donec a fermentum nisi. </p> </div> <div class="item"> <img src="https://file.lsjlt.com/upload/202306/07/zoc1bywaazf.jpg"> <p>3 Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit.</p> </div> <div class="item"> <img src="https://file.lsjlt.com/upload/202306/07/12drenw5mbq.jpg"> <p> 4 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. </p> </div> <div class="item"> <img src="https://file.lsjlt.com/upload/202306/07/3keb2zke5ol.jpg"> <p> 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p> </div> </div> </div></body></html>看完上述内容，你们掌握使用CSS3怎么实现一个瀑布流布局的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注编程网精选频道，感谢各位的阅读！
--结束END--
本文标题: 使用CSS3怎么实现一个瀑布流布局
本文链接: https://www.lsjlt.com/news/254242.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0