css3多列及瀑布流效果

时间：2021-10-25 07:30:46

css3内容分块，多列效果(类似报纸版块排版):

.div02{

    /*count:内容分为几列，gap:内容与分割线的距离，rule:分割线样式*/

    column-count:;

    column-gap:30px;

    column-rule:5px outset #ff0000;

    -webkit-column-count:;

    -webkit-column-gap: 30px;

    -webkit-column-rule: 5px outset #ff0000;

}

css3实现图片瀑布流排版:

.container {

    column-width: 350px;

    -webkit-column-width: 350px;

    column-gap: 5px;

    -webkit-column-gap: 5px;

}

img {

    width: 400px;

}

.container div {

    width: 350px;

    margin: 5px;

}

p {

    text-align: center;

}

瀑布流效果html代码如下:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="pubuliu.css" />

    </head>

    <body>

        <div class="container">

            <div><img src="../../image/5.jpg" /></div>

            <div><img src="../../image/2.jpg" /><p>文字描述</p></div>

            <div><img src="../../image/5.jpg" /></div>

            <div><img src="../../image/2.jpg" /></div>

            <div><img src="../../image/5.jpg" /><p>文字描述</p></div>

            <div><img src="../../image/3.jpg" /></div>

            <div><img src="../../image/5.jpg" /></div>

            <div><img src="../../image/5.jpg" /></div>

            <div><img src="../../image/3.jpg" /></div>

            <div><img src="../../image/5.jpg" /></div>

            <div><img src="../../image/5.jpg" /><p>文字描述</p></div>

            <div><img src="../../image/5.jpg" /></div>

            <div><img src="../../image/5.jpg" /></div>

            <div><img src="../../image/5.jpg" /></div>

            <div><img src="../../image/5.jpg" /><p>文字描述</p></div>

            <div><img src="../../image/5.jpg" /></div>

            <div><img src="../../image/5.jpg" /></div>

        </div>

    </body>

</html>

相关文章