<!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> 视觉冲击。。。 真心神奇 不二老哥,把图片贡献出来吧{:10_256:} shishunfu 发表于 2017-5-3 16:11
不二老哥,把图片贡献出来吧
谷歌浏览器/*display: inline-block;*/好像也是一样,火狐的用display: inline-block;就是一个长列{:10_261:}
这个好像是涉及浏览器兼容性了{:10_269:} shishunfu 发表于 2017-5-4 10:18
谷歌浏览器/*display: inline-block;*/好像也是一样,火狐的用display: inline-block;就是一个长列{:10_261 ...
友情提示:chrome! 交作业!
既然已经瀑布流,就算没有懒加载,没有尺寸改变重新排版,至少宽度自适应吧
另外,inline-block你是加在里层的,既然外层已经用了column,里层完全可以 .pic, img{width:100%;},inline-block是没必要的,需要的场景应该是外城没有用column而里层.pic{width:33%};
照片哪里的{:5_91:} 林子军 发表于 2018-2-4 14:25
照片哪里的
最上面哦~ 交作业:
<!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>
为什么有按数列排列的,我的是按横向排列呢
mark
先理解后,自己实现{:10_256:}
<!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>~ <!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 21:00 编辑
设置了column属性,结果如图下
,pic和img都设置完也和老师一样了
就是好奇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>
@不二如是
column{:5_109:}
页:
[1]