今天小编跟大家讲解下有关CSS3使用多列制作瀑布流 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3使用多列制作瀑布流 的相关资料，希望小伙伴们看了有所帮助。
先来来看一看CSS3如何实现多列显示，代码如下
CSS Code复制内容到剪贴板 <divclass="div1"> 大家好，这里是用来站位的文字大家好，这里是用来站位的文字 大家好，这里是用来站位的文字大家好，这里是用来站位的文字 大家好，这里是用来站位的文字大家好，这里是用来站位的文字 大家好，这里是用来站位的文字大家好，这里是用来站位的文字 大家好，这里是用来站位的文字大家好，这里是用来站位的文字 大家好，这里是用来站位的文字大家好，这里是用来站位的文字 大家好，这里是用来站位的文字大家好，这里是用来站位的文字 大家好，这里是用来站位的文字大家好，这里是用来站位的文字 大家好，这里是用来站位的文字大家好，这里是用来站位的文字 大家好，这里是用来站位的文字大家好，这里是用来站位的文字 大家好，这里是用来站位的文字大家好，这里是用来站位的文字 大家好，这里是用来站位的文字大家好，这里是用来站位的文字 大家好，这里是用来站位的文字大家好，这里是用来站位的文字 大家好，这里是用来站位的文字大家好，这里是用来站位的文字 </div> .div1{ column-count:4; -moz-column-count:4; -moz-column-gap:70px; column-gap:70px; column-rule:5pxoutset#FF0000; -moz-column-rule:5pxoutset#FF0000; }效果图：
CSS3使用多列制作瀑布流：
XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="countstyle.css" type="text/css" rel="stylesheet"> </head> <body> <div class="container"> <!--尽量在做图片的时候使其宽度相等--> <div><img src=http://xyrl.com/skin/7ke/image/nopic.gif <p>这里是产品描述</p></div> <div><img src=http://xyrl.com/skin/7ke/image/nopic.gif <div><img src=http://xyrl.com/skin/7ke/image/nopic.gif <div><img src=http://xyrl.com/skin/7ke/image/nopic.gif <p>这里是产品描述</p></div> <div><img src=http://xyrl.com/skin/7ke/image/nopic.gif <div><img src=http://xyrl.com/skin/7ke/image/nopic.gif <div><img src=http://xyrl.com/skin/7ke/image/nopic.gif <p>这里是产品描述</p></div> <div><img src=http://xyrl.com/skin/7ke/image/nopic.gif <div><img src=http://xyrl.com/skin/7ke/image/nopic.gif <div><img src=http://xyrl.com/skin/7ke/image/nopic.gif</div> <div><img src=http://xyrl.com/skin/7ke/image/nopic.gif <div><img src=http://xyrl.com/skin/7ke/image/nopic.gif <div><img src=http://xyrl.com/skin/7ke/image/nopic.gif <p>这里是产品描述</p></div> <div><img src=http://xyrl.com/skin/7ke/image/nopic.gif <div><img src=http://xyrl.com/skin/7ke/image/nopic.gif <div><img src=http://xyrl.com/skin/7ke/image/nopic.gif</div> <div><img src=http://xyrl.com/skin/7ke/image/nopic.gif <div><img src=http://xyrl.com/skin/7ke/image/nopic.gif </div> </body> </html> .container{ column-width: 300px; -moz-column-width: 300px; -moz-column-gap: 5px; column-gap: 5px; } .container.div{ width: 250px; margin:5px; } .container p{ text-align: center; }以上就是本文的全部内容，希望对大家的学习有所帮助。
来源：爱蒂网
