0 0 5 1 - 瀑布流排版 - 【高情怀必备】

不二如是 · 发表于 2017-2-18 16:55:02

购买主题 已有 17 人购买 本主题需向作者支付 2 鱼币 才能浏览

shishunfu · 发表于 2017-5-4 10:12:50

交作业

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>瀑布流布局</title>
        <style type="text/css">
                body{
                        background: #AAFFEE;
                        margin:10px;
                }
                #page{
                        width:888px;
                        margin: 0 auto;
                }
                .col{
                        column-count:3;
                        column-gap: 13px;
                        column-fill: auto;
                        /*
                        column-count属性指定某个元素应分为的列数。
                        column-gap的属性指定的列之间的差距。
                        column-fill属性指定如何填充列。
                        */
                }
                .pic{
                        box-sizing: border-box;
                        width: 290px;
                        background: #FFF;
                        padding: 20px;
                        box-shadow: 0 0 5px rgba(0,0,0,.5);
                        margin-bottom: 20px;
                        display: inline-block;
                }
                .pic img{
                        width: 260px;
                }
        </style>
        
</head>
<body>
        <div id="page">
                <div class="col">
                        <div class="pic">
                                <img src="img/1.png">
                                <p>埃菲尔铁塔（法语：La Tour Eiffel）设计新颖独特，是世界建筑史上的技术杰作，因而成为法国和巴黎的一个重要景点和突出标志。</p>
                        </div>
                        <div class="pic">
                                <img src="img/2.png"> 
                                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
                        </div>
                        <div class="pic">
                                <img src="img/3.png">
                                <p>巴黎圣母院大教堂（Cathédrale Notre Dame de Paris）是一座位于法国巴黎市中心、西堤岛上的教堂建筑，也是天主教巴黎总教区的主教座堂。</p>
                        </div>
                        <div class="pic">
                                <img src="img/4.png">
                                <p>意大利古罗马竞技场罗马斗兽场（Colosseum）是古罗马帝国专供奴隶主、贵族和自由民观看斗兽或奴隶角斗的地方。</p>
                        </div>
                        <div class="pic">
                                <img src="img/5.png">
                                <p>比萨斜塔（意大利语：Torre pendente di Pisa或Torre di Pisa，英语：Leaning Tower of Pisa）是意大利比萨城大教堂的独立式钟楼，位于意大利托斯卡纳省比萨城北面的奇迹广场上。</p>
                        </div>
                        <div class="pic">
                                <img src="img/6.png">
                                <p>江南水乡所处的长江三角洲和太湖水网地区，气候温和，季节分明，雨量允沛，因此形成了以水运为主的交通体系。</p>
                        </div>
                        <div class="pic">
                                <img src="img/7.png">
                                <p>日本城堡，从公元前后到近代有着将近2000多年的历史，其建筑主要目的是为了御敌于外，因此大多结构坚固，实战性强。</p>
                        </div>
                        <div class="pic">
                                <img src="img/8.png">
                                <p>榫卯结构，中国古建筑以木材、砖瓦为主要建筑材料，以木构架结构为主要的结构方式，由立柱、横梁、顺檩等主要构件建造而成，各个构件之间的结点以榫卯相吻合，构成富有弹性的框架。</p>
                        </div>
                        <div class="pic">
                                <img src="img/9.png">
                                <p>颐和园，中国清朝时期皇家园林，前身为清漪园，坐落在北京西郊，距城区十五公里，占地约二百九十公顷，与圆明园毗邻。它是以昆明湖、万寿山为基址，以杭州西湖为蓝本，汲取江南园林的设计手法而建成的一座大型山水园林，也是保存最完整的一座皇家行宫御苑，被誉为“皇家园林博物馆”</p>
                        </div>
                        <div class="pic">
                                <img src="img/10.png">
                                <p>竹楼主要指两层或以上的竹结构楼房，属于南方“干阑式建筑”的一种。是傣家的标志民居。又称傣家竹楼。</p>
                        </div>
                        
                </div>
        </div>
</body>
</html>

a540656809 · 发表于 2017-3-6 23:45:01

视觉冲击。。。

会魔法的魔法 · 发表于 2017-3-20 14:58:33

真心神奇

shishunfu · 发表于 2017-5-3 16:11:14

不二老哥，把图片贡献出来吧

不二如是 · 发表于 2017-5-3 21:40:39

shishunfu 发表于 2017-5-3 16:11
不二老哥，把图片贡献出来吧

img.zip (2.53 MB, 下载次数: 20)

shishunfu · 发表于 2017-5-4 10:18:35

谷歌浏览器/*display: inline-block;*/好像也是一样，火狐的用display: inline-block;就是一个长列

这个好像是涉及浏览器兼容性了

不二如是 · 发表于 2017-5-4 21:39:45

shishunfu 发表于 2017-5-4 10:18
谷歌浏览器/*display: inline-block;*/好像也是一样，火狐的用display: inline-block;就是一个长列{:10_261 ...

友情提示：chrome！

aswyamato1989 · 发表于 2017-7-27 04:15:34

交作业！

白白白zzz · 发表于 2017-7-30 14:58:39

既然已经瀑布流,就算没有懒加载,没有尺寸改变重新排版,至少宽度自适应吧

另外,inline-block你是加在里层的,既然外层已经用了column,里层完全可以 .pic, img{width:100%;},inline-block是没必要的,需要的场景应该是外城没有用column而里层.pic{width:33%};

林子军 · 发表于 2018-2-4 14:25:42

照片哪里的

不二如是 · 发表于 2018-2-4 15:10:17

林子军发表于 2018-2-4 14:25
照片哪里的

最上面哦～

隨鈊乄鎍慾 · 发表于 2018-6-23 21:51:31

交作业：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局</title>
    <style type="text/css">
        body{
            background:#aaffee;
            margin:20px;
        }
        #page{
            width:888px;
            margin:0 auto;
        }
        .col{
            column-count:3;
            column-gap:13px;
            column-fill:auto;
        }
        .pic{
            box-sizing:border-box;
            width:300px;
            background:#fff;
            padding:20px;
            margin-bottom:20px;
            display:inline-block;
            box-shadow:0 0 5px rgba(0,0,0,0.5);
        }
        .pic img{
            width:300px;
        }
    </style>
</head>
<body>
<div id="page">
    <div class="col">
        <div class="pic">
            <img src="img/1.png">
            <p>埃菲尔铁塔（法语：La Tour Eiffel）设计新颖独特，是世界建筑史上的技术杰作，因而成为法国和巴黎的一个重要景点和突出标志。</p>
        </div>
        <div class="pic">
            <img src="img/2.png">
            <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
        </div>
        <div class="pic">
            <img src="img/3.png">
            <p>巴黎圣母院大教堂（Cathédrale Notre Dame de Paris）是一座位于法国巴黎市中心、西堤岛上的教堂建筑，也是天主教巴黎总教区的主教座堂。</p>
        </div>
        <div class="pic">
            <img src="img/4.png">
            <p>意大利古罗马竞技场罗马斗兽场（Colosseum）是古罗马帝国专供奴隶主、贵族和自由民观看斗兽或奴隶角斗的地方。</p>
        </div>
        <div class="pic">
            <img src="img/5.png">
            <p>比萨斜塔（意大利语：Torre pendente di Pisa或Torre di Pisa，英语：Leaning Tower of Pisa）是意大利比萨城大教堂的独立式钟楼，位于意大利托斯卡纳省比萨城北面的奇迹广场上。</p>
        </div>
        <div class="pic">
            <img src="img/6.png">
            <p>江南水乡所处的长江三角洲和太湖水网地区，气候温和，季节分明，雨量允沛，因此形成了以水运为主的交通体系。</p>
        </div>
        <div class="pic">
            <img src="img/7.png">
            <p>日本城堡，从公元前后到近代有着将近2000多年的历史，其建筑主要目的是为了御敌于外，因此大多结构坚固，实战性强。</p>
        </div>
        <div class="pic">
            <img src="img/8.png">
            <p>榫卯结构，中国古建筑以木材、砖瓦为主要建筑材料，以木构架结构为主要的结构方式，由立柱、横梁、顺檩等主要构件建造而成，各个构件之间的结点以榫卯相吻合，构成富有弹性的框架。</p>
        </div>
        <div class="pic">
            <img src="img/9.png">
            <p>颐和园，中国清朝时期皇家园林，前身为清漪园，坐落在北京西郊，距城区十五公里，占地约二百九十公顷，与圆明园毗邻。它是以昆明湖、万寿山为基址，以杭州西湖为蓝本，汲取江南园林的设计手法而建成的一座大型山水园林，也是保存最完整的一座皇家行宫御苑，被誉为“皇家园林博物馆”</p>
        </div>
        <div class="pic">
        <img src="img/10.png">
        <p>竹楼主要指两层或以上的竹结构楼房，属于南方“干阑式建筑”的一种。是傣家的标志民居。又称傣家竹楼。</p>
        </div>
    </div>
</div>

</body>
</html>

yanmeilemon · 发表于 2018-7-9 17:11:01

为什么有按数列排列的，我的是按横向排列呢

qianduan2018 · 发表于 2019-4-18 12:28:33

mark

你在意在便在 · 发表于 2019-11-3 10:59:14

先理解后，自己实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流布局</title>
<style type="text/css">
body {
        background: burlywood; 
        margin: 10px;
}
.col {
        columns:10px 3;
        column-fill:auto;
}
#page {
        width:888px;
        margin:0 auto;
}
.pic {
        box-sizing:border-box;
        box-shadow:0 0 5px rgba(0,0,0,.5);
        background: #ecf0f1;
        width: 290px;
        margin-bottom: 10px;
        padding: 10px;
        display:inline-block;
}
        .pic img {
                width:260px;
        }
</style>
</head>
<body>
<div id="page">
<div class="col">
        <div class="pic">
        <img src="img (1)/img/1.png">
        <p>埃菲尔铁塔(法语：La Tour Eiffel)
        设计新颖独特，是世界建筑史上的技术杰作，因而成为法国和巴黎的一个重要景点和突出标志。</p>
        </div>
        <div class="pic">
        <img src="img (1)/img/2.png">
        <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
        </div>
        <div class="pic">
        <img src="img (1)/img/3.png" alt="">
        <p>巴黎圣母院大教堂(Cathédrale Notre Dame de Paris)
                是一座位于法国巴黎市中心、西提岛上的教堂建筑，页数天主教巴黎宗教区的主教坐堂。</p>
        </div>
        <div class="pic">
        <img src="img (1)/img/4.png" alt="">
        <p>意大利古罗马竞技场罗马斗兽场(Colosseum)
        是古罗马帝国专供奴隶主、贵族和自由民观看斗兽或奴隶角斗的地方。</p>
        </div>
        <div class="pic">
        <img src="img (1)/img/5.png" alt="">
        <p>比萨斜塔(Leaning Tower of Pisa)
        是意大利比萨城大教堂的独立式钟楼，位于意大利托斯卡纳省比萨城北面的奇迹广场上。</p>
        </div>
        <div class="pic">
        <img src="img (1)/img/6.png" alt="">
        <p>江南水乡所处的长江三角洲和太湖水网地区，
        气候温暖，季节分明，雨量充沛，因此形成了以水运为主的交通体系。</p>
        </div>
        <div class="pic">
        <img src="img (1)/img/7.png" alt="">
        <p>日本城堡，从公元前后到近代有着将近2000多年的历史，
        其建筑主要的目的是为了御敌于外，因此大多结构坚固，实战性强。</p>
        </div>
        <div class="pic">
        <img src="img (1)/img/8.png" alt="">
        <p>榫卯结构，中国古建筑以木材、砖瓦为主要建筑材料，以木构架结构为主要的结构方式，
        由立柱、横梁、顺檩等主要构建建造而成，各个构件之间的结点以榫卯相吻合，构成富有弹性的框架。
        </p>
        </div>
        <div class="pic">
        <img src="img (1)/img/9.png" alt="">
        <p>颐和园，中国清朝时期皇家园林，前身为清漪园，与圆明园毗邻。它是以昆明湖、万寿山为基址
        以杭州西湖为蓝本，汲取江南园林的设计手法而构建成的一座大型山水园林，也是保存最完整的一座皇家行宫御苑，被誉为“皇家园林博物馆”。
        </p>
        </div>
        <div class="pic">
        <img src="img (1)/img/10.png">
        <p>竹楼主要指两层或以上的竹结构楼房，属于南方“干阑式建筑”的一种。是傣家的标志民居。又称傣家竹楼。</p>
        </div>
</div>
</div>
</body>
</html>

~

suweixuan1998 · 发表于 2020-1-10 11:57:53

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>瀑布流布局</title>
    <style type="text/css">
        body{
            background: #AAFFEE;
            margin:20px;
        }
        #page{
             width:888px;
             margin: 0 auto;
         }
        .col{
            column-count:3;
            column-gap: 100px;
            column-fill: auto;
        }
        .pic{
            box-sizing: border-box;
            width: 320px;
            background: #FFF;
            padding: 20px;
            box-shadow: 0 0 5px rgba(0,0,0,.5);
            margin-bottom: 20px;
            display: inline-block;
        }
        .pic img{
            width: 220px;
        }
    </style>
</head>
<body>
    <div id="page">
        <div class="col">
            <div class="pic">
                <img src="img/1.png">
                <p>埃菲尔铁塔法语：La Tour Eiffel）设计新颖独特，是世界建筑史上的技术杰作，因而成为法国和巴黎的一个重要景点和突出标志。</p>
            </div>
            <div class="pic">
                <img src="img/2.png">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/3.png">
                <p>巴黎圣母院大教堂（Cathédrale Notre Dame de Paris）是一座位于塞纳河畔、法国巴黎市中心、西堤岛上的哥特式基督教教堂建筑，是天主教巴黎总教区的主教座堂。</p>
            </div>
            <div class="pic">
                <img src="img/4.png">
                <p>罗马斗兽场（意大利语：Colosseo、英语：Colosseum），原名弗拉维圆形剧场（Amphitheatrum Flavium），又译为罗马角斗场、科洛西姆竞技场。</p>
            </div>
            <div class="pic">
                <img src="img/5.png">
                <p>比萨斜塔（意大利语：Torre pendente di Pisa或Torre di Pisa，英语：Leaning Tower of Pisa）建造于1173年8月，是意大利比萨城大教堂的独立式钟楼，位于意大利托斯卡纳省比萨城北面的奇迹广场上。</p>
            </div>
            <div class="pic">
                <img src="img/6.png">
                <p>江南水乡所处的长江三角洲和太湖水网地区，气候温和，季节分明，雨量充沛，因此形成了以水运为主的交通体系。</p>
            </div>
            <div class="pic">
                <img src="img/7.png">
                <p>日本城堡，从公元前后到近代有着将近2000多年的历史，其建筑主要目的是为了御敌于外，因此大多结构坚固，实战性强。</p>
            </div>
            <div class="pic">
                <img src="img/8.png">
                <p>榫卯结构，中国古建筑以木材、砖瓦为主要建筑材料，以木构架结构为主要的结构方式，由立柱、横梁、顺檩等主要构件建造而成，各个构件之间的结点以榫卯相吻合，构成富有弹性的框架。</p>
            </div>
            <div class="pic">
                <img src="img/9.png">
                <p>颐和园，中国清朝时期皇家园林，前身为清漪园，坐落在北京西郊，距城区15公里，占地约290公顷，与圆明园毗邻。</p>
            </div>
            <div class="pic">
                <img src="img/10.png">
                <p>竹楼主要指两层或以上的竹结构楼房，属于南方“干阑式建筑”的一种。是傣家的标志民居。又称傣家竹楼。</p>
            </div>
        </div>

    </div>
</body>
</html>

小脑斧 · 发表于 2020-3-16 20:57:14

本帖最后由小脑斧于 2020-3-16 21:00 编辑

设置了column属性，结果如图下
花.png

，pic和img都设置完也和老师一样了
撸鉄2.png

就是好奇column为什么不起效果了
我的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局</title>
    <style type="text/css">
        body{
            background: #AAFFEE;
            margin:10px;
        }
        #page{
            width:888px;
            margin: 0 auto;
        }
        .col{
            column-count:3;
            column-gap: 13px;
            column-fill: auto;
        }
        .pic{
            box-sizing: border-box;
            width: 290px;
            background: #FFF;
            padding: 20px;
            box-shadow: 0 0 5px rgba(0,0,0,.5);
            margin-bottom: 20px;
            display: inline-block;/*整块*/
        }
        .pic img{
            width: 260px;
        }
    </style>
</head>
<body>
<div id="page">
    <div class="col">
        <div class="pic">
            <img src="img/1.png">
            <p>埃菲尔铁塔（法语：La Tour Eiffel）设计新颖独特，是世界建筑史上的技术杰作，因而成为法国和巴黎的一个重要景点和突出标志。</p>
        </div>
        <div class="pic">
            <img src="img/2.png">
            <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
        </div>
        <div class="pic">
            <img src="img/3.png">
            <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
        </div><!-- 。。。。。相同的省略掉。。。。。。-->
        <div class="pic">
            <img src="img/4.png">
            <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
        </div>
        <div class="pic">
            <img src="img/5.png">
            <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
        </div>
        <div class="pic">
            <img src="img/6.png">
            <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
        </div>
        <div class="pic">
            <img src="img/7.png">
            <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
        </div>
        <div class="pic">
            <img src="img/8.png">
            <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
        </div>
        <div class="pic">
            <img src="img/9.png">
            <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
        </div>
        <div class="pic">
            <img src="img/6.png">
            <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
        </div>
        <div class="pic">
            <img src="img/10.png">
            <p>竹楼主要指两层或以上的竹结构楼房，属于南方“干阑式建筑”的一种。是傣家的标志民居。又称傣家竹楼。</p>
        </div>
    </div>
</div>
</body>
</html>

小脑斧 · 发表于 2020-3-16 21:07:44

@不二如是
column

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 56999 狗仔卡	发表于 2017-2-18 16:55:02 \| 显示全部楼层 \|阅读模式购买主题已有 17 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 36
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

[庖丁解牛] 0 0 5 1 - 瀑布流排版 - 【高情怀必备】

本帖被以下淘专辑推荐:

点评

评分

评分

点评

评分