您的位置：首页 > Web前端 > CSS

2015-12-11复习之CSS3动画多列

2015-12-11 23:34 267 查看

一、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 属性。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航