先来来看一看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="img/1.png"> <p>这里是产品描述</p></div><div><img src="img/2.png"></div> <div><img src="img/3.png"></div> <div><img src="img/4.png"> <p>这里是产品描述</p></div><div><img src="img/5.png"></div> <div><img src="img/6.png"></div> <div><img src="img/7.png"> <p>这里是产品描述</p></div><div><img src="img/8.png"></div> <div><img src="img/9.png"></div> <div><img src="img/1.png"></div> <div><img src="img/2.png"></div> <div><img src="img/3.png"></div> <div><img src="img/4.png"> <p>这里是产品描述</p></div><div><img src="img/5.png"></div> <div><img src="img/6.png"></div> <div><img src="img/7.png"></div> <div><img src="img/8.png"></div> <div><img src="img/9.png"></div> </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; }以上就是本文的全部内容，希望对大家的学习有所帮助。
