CSS3使用多列制作瀑布流

2016-5-11 11:09 2670 0

摘要: 先来来看一看CSS3如何实现多列显示，代码如下CSS Code复制内容到剪贴板divclass="div1" 大家好，这里是用来站位的文字大家好，这里是用来站位的文字大家好，这里是用来站位的文字大家好，这里是用来站位的文字 ...

先来来看一看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>
<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>