2015-12-11复习之CSS3动画多列
一、column-count（将文章划分的列数）
eg：column-count:3;
二、column-gap（文章划分块中间的间距）
eg：column-gap:40px;
三、column-rule（在文章划分列位置加上颜色规则）
eg：column-rule:4px outset #ff0000;
四、column-span（跨列）
跨列一列（column-span:1）
跨列所有列（column-span:all）
浏览器支持
Internet Explorer 10 和 Opera 支持 column-span 属性。
Safari 和 Chrome 支持替代的 -webkit-column-span 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-span 属性。
五、CSS3瀑布流
demo
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{
width: 1020px;
margin: auto;
column-width: 250px;
-webkit-column-width: 250px;
column-gap: 5px;
-webkit-column-gap: 5px;
}
.container div{
width: 250px;
margin: 5px 0;
}
.container p{
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div><img src="001.jpg"><p>这里添加便签</p></div>
<div><img src="002.jpg"></div>
<div><img src="003.jpg"></div>
<div><img src="004.jpg"></div>
<div><img src="005.jpg"></div>
<div><img src="006.jpg"></div>
<div><img src="007.jpg"></div>
<div><img src="008.jpg"></div>
<div><img src="009.jpg"></div>
<div><img src="001.jpg"></div>
<div><img src="002.jpg"></div>
<div><img src="003.jpg"></div>
<div><img src="004.jpg"></div>
<div><img src="005.jpg"></div>
<div><img src="006.jpg"></div>
<div><img src="007.jpg"></div>
<div><img src="008.jpg"></div>
<div><img src="009.jpg"></div>
<div><img src="001.jpg"></div>
<div><img src="002.jpg"></div>
<div><img src="003.jpg"></div>
<div><img src="004.jpg"></div>
<div><img src="005.jpg"></div>
<div><img src="006.jpg"></div>
<div><img src="007.jpg"></div>
<div><img src="008.jpg"></div>
<div><img src="009.jpg"></div>
<div><img src="001.jpg"></div>
<div><img src="002.jpg"></div>
<div><img src="003.jpg"></div>
<div><img src="004.jpg"></div>
<div><img src="005.jpg"></div>
<div><img src="006.jpg"></div>
<div><img src="007.jpg"></div>
<div><img src="008.jpg"></div>
<div><img src="009.jpg"></div>
<div><img src="001.jpg"></div>
<div><img src="002.jpg"></div>
<div><img src="003.jpg"></div>
<div><img src="004.jpg"></div>
<div><img src="005.jpg"></div>
<div><img src="006.jpg"></div>
<div><img src="007.jpg"></div>
<div><img src="008.jpg"></div>
<div><img src="009.jpg"></div>
</div>
</body>
</html>
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
Internet Explorer 10 和 Opera 支持 column-span 属性。