先来来看一看CSS3如何实现多列显示，代码如下
CSS Code复制内容到剪贴板
<div class="div1">
大家好，这里是用来站位的文字 大家好，这里是用来站位的文字
大家好，这里是用来站位的文字 大家好，这里是用来站位的文字
大家好，这里是用来站位的文字 大家好，这里是用来站位的文字
大家好，这里是用来站位的文字 大家好，这里是用来站位的文字
大家好，这里是用来站位的文字 大家好，这里是用来站位的文字
大家好，这里是用来站位的文字 大家好，这里是用来站位的文字
大家好，这里是用来站位的文字 大家好，这里是用来站位的文字
大家好，这里是用来站位的文字 大家好，这里是用来站位的文字
大家好，这里是用来站位的文字 大家好，这里是用来站位的文字
大家好，这里是用来站位的文字 大家好，这里是用来站位的文字
大家好，这里是用来站位的文字 大家好，这里是用来站位的文字
大家好，这里是用来站位的文字 大家好，这里是用来站位的文字
大家好，这里是用来站位的文字 大家好，这里是用来站位的文字
大家好，这里是用来站位的文字 大家好，这里是用来站位的文字
</div>
.div1{
/*分列的数量*/
column-count: 4;
-moz-column-count:4;
/*每一个分列中间的距离*/
-moz-column-gap: 70px;
column-gap: 70px;
/*每两个列之间的线和线的颜色*/
column-rule: 5px outset #FF0000;
-moz-column-rule: 5px outset #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>
