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

最新推荐文章于 2022-10-20 22:05:29 发布

cysear

最新推荐文章于 2022-10-20 22:05:29 发布

阅读量410

点赞数

分类专栏： CSS3 文章标签： css3 多列瀑布流

本文链接：https://blog.csdn.net/cysear/article/details/50239175

版权

CSS3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

cysear

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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（跨列）跨列一
复制链接

扫一扫