CSS3 - 多列属性详解(图片瀑布流)

最新推荐文章于 2024-08-01 15:19:04 发布

UIEngineer

最新推荐文章于 2024-08-01 15:19:04 发布

阅读量2.3k

点赞数 1

分类专栏： HTML5/CSS3

本文链接：https://blog.csdn.net/zjsfdx/article/details/79330870

版权

HTML5/CSS3 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片瀑布流</title>
<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
<link href="picBegin.css" rel="stylesheet" type="text/css">
</head>

<body>
    <!-- picBegin -->
    <h1>图片瀑布流</h1>
    <ul class="picC">
        <li><img src="images/00.jpg" alt="" /></li>
        <li><img src="images/01.jpg" alt="" /></li>
        <li><img src="images/02.jpg" alt="" /></li>
        <li><img src="images/03.jpg" alt="" /></li>
        <li><img src="images/04.jpg" alt="" /></li>
        <li><img src="images/05.jpg" alt="" /></li>
        <li><img src="images/06.jpg" alt="" /></li>
        <li><img src="images/07.jpg" alt="" /></li>
        <li><img src="images/08.jpg" alt="" /></li>
        <li><img src="images/09.jpg" alt="" /></li>
        <li><img src="images/10.jpg" alt="" /></li>
        <li><img src="images/11.jpg" alt="" /></li>
        <li><img src="images/12.jpg" alt="" /></li>
        <li><img src="images/13.jpg" alt="" /></li>
        <li><img src="images/14.jpg" alt="" /></li>
        <li><img src="images/15.jpg" alt="" /></li>
        <li><img src="images/16.jpg" alt="" /></li>
        <li><img src="images/17.jpg" alt="" /></li>
        <li><img src="images/18.jpg" alt="" /></li>
        <li><img src="images/19.jpg" alt="" /></li>
    </ul>
</body>
</html>

picBegin.css

img{
    width:100%;
}

h1{
    width:100%;
    height:50px;
    margin:0;
    text-align:center;
    line-height:50px;
    background-color:#fff;
    box-shadow:0 2px 6px 0 rgba(0,0,0,.5);
    position:fixed;
    left:0;
    top:0;
}
.picC{
    width:90%;
    margin:50px auto;
    -webkit-column-count:4;
    -moz-column-count:4;
    column-count:4;
    -webkit-column-gap:20px;
    -moz-column-gap:20px;
    -column-gap:20px;
    list-style:none;
    -webkit-column-rule:1px solid dashed rgba(0,0,0,.5);
    -moz-column-rule:1px dashed rgba(0,0,0,.5);
    column-rule:1px dashed rgba(0,0,0,.5);
}   
.picC li{
    margin-top:10px;
}

这里写图片描述

UIEngineer

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS3 - 多列属性详解(图片瀑布流)

index.html<!doctype html><html><head><meta charset="utf-8"><title>图片瀑布流</title><link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet"><link href="picBegin.css" re
复制链接

扫一扫

专栏目录