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

你在意在便在 · 发表于 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>

复制代码

~

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

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

浏览过的版块