瀑布流

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>瀑布流</title>

    <style>

        * {

            margin: 0px;

            padding: 0px;

        }

        li {

            list-style: none;

        }

        #div1 {

            width: 950px;

            height: auto;

            margin: 20px auto;

        }

        ul {

            width: 250px;

            float: left;

        }

        img {

            width: 230px;

            height: 150px;

        }

    </style>

</head>

<body>

    <div id="div1">

        <ul>

            <li><img src="Scripts/img/bg.jpg" /></li>

            <li><img src="Scripts/img/bg.jpg" /></li>

            <li><img src="Scripts/img/bg.jpg" /></li>

        </ul>

        <ul>

            <li><img src="Scripts/img/bg.jpg" /></li>

            <li><img src="Scripts/img/bg.jpg" /></li>

            <li><img src="Scripts/img/bg.jpg" /></li>

        </ul>

        <ul>

            <li><img src="Scripts/img/bg.jpg" /></li>

            <li><img src="Scripts/img/bg.jpg" /></li>

            <li><img src="Scripts/img/bg.jpg" /></li>

        </ul>

    </div>

</body>

</html>

css 瀑布流的更多相关文章

  1. 关于瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）

    瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...

  2. 分享：纯 css 瀑布流 和 js 瀑布流

    分享一次纯 css 瀑布流  和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...

  3. css浮动+应用（瀑布流效果的实现）

    首先是index.html文件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  4. 简单CSS定位瀑布流实现方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. css基础之 图片瀑布流布局：用CSS+DIV等宽格子堆砌瀑布流效果 （一）

    <!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...

  6. 详解纯css实现瀑布流（multi-column多列及flex布局）

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

  7. 分别用js和css实现瀑布流

    下午查找了瀑布流的相关原理,找了一些css3实现的还有js实现的,最后总结了一些比较简单的,易懂的整理起来 1.css3实现 只要运用到    column-count分列 column-width固 ...

  8. 基于CSS多列实现瀑布流

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 纯css实现瀑布流（multi-column多列及flex布局）

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

随机推荐

  1. 计算机基础 - 动态规划、分治法、memo

    动态规划 ≈ 分治法 + memo def memo(func): cache = {} def wrap(*args): if args not in cache: cache[args] = fu ...

  2. Docker 安装 Filebeat

    使用同版本镜像 7.4.1 1.下载Filebeat镜像 docker pull store/elastic/filebeat: docker images 2.下载默认官方配置文件wget http ...

  3. VSCODE 教程网

    http://geek-docs.com/vscode/vscode-tutorials/vs-code-text-selection.html

  4. yp寒假训练一

    19年东北四省省赛 做了J G C 补了E H J签到题 G 题意: 给n个正方形的两个斜对角点坐标,问最小的移动可以重叠(移动上下左右一格) 思路: 一开始想的是中心pos移动,但是可能有小数,而且 ...

  5. 【PAT甲级】1054 The Dominant Color (20 分)

    题意: 输入两个正整数M和N(M<=800,N<=600),分别代表一张图片的宽度和高度,接着输入N行每行包括M个点的颜色编号,输出这张图片主导色的编号.(一张图片的主导色占据了一半以上的 ...

  6. device supports x86 but apk only supports armeabi-v7a问题解决

    我们可以在build.gradle中有ndk这段代码,只要在后面加上“x86”,再sync now一下,就发现可以运行了. ndk { abiFilters "armeabi-v7a&quo ...

  7. 解决fastjson反序列化日期0000-00-00失败的方案

    解决fastjson反序列化日期0000-00-00失败的方案 22 Jul 2016 一.案例场景复原 示例场景里涉及两个class:TestDemo.java, DateBeanDemo.java ...

  8. ios 物流时间轴,自动匹配电话号码,可点击拨打

    http://www.code4app.com/thread-27587-1-1.html 资讯时间轴(折叠/展开) http://www.code4app.com/thread-32358-1-1. ...

  9. 知乎模拟登录，支持验证码和保存 Cookies

    import requests import time import re import base64 import hmac import hashlib import json import ma ...

  10. 15条MySQL改善经验让系统更稳定

    MySQL 作为目前的主流开源数据库, 既能挑战 “双11”,又能扛起 “618”,比起网红版数据库,MySQL 绝对是实力担当. 1. 为查询缓存优化查询 像 NOW() 和 RAND() 或是其它 ...