[已解决]在 class 。col里面那里设置错了吗，为什么不一样

向一朵朵鲜花 · 发表于 2017-3-15 15:39:58

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!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: 290;
background: #FFF;
padding: 20;
box-shadow: 0 0 5px rgab(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="1.png">
<p>埃菲尔铁塔（法语：La Tour Eiffel）设计新颖独特，是世界建筑史上的技术杰作，因而成为法国和巴黎的一个重要景点和突出标志。</p>
</div>
<div class="pic">
<img src="2.png">
<p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
</div>
<div class="pic">
<img src="3.png">
<p>巴黎圣母院大教堂,是一座位于法国巴黎市中心，西提岛上的教堂建筑，也是天主教巴黎总教区的主教坐堂。</p>
</div>
<div class="pic">
<img src="4.png">
<p>意大利古罗马竞技场罗马斗兽场，是古罗马帝国专供奴隶主，贵族和自由民观看斗兽成奴隶角斗的地方。</p>>
</div>
<div class="pic">
<img src="5.png">
<p>比萨斜塔，是意大利比萨城大教堂的独立式钟楼，位于意大利托斯卡纳者比萨城北面的奇迹广场上。</p>>
</div>
<div class="pic">
<img src="6.png">
<p>江南水乡所处的长江三角西和太原水河地区，气候温和，季节分明，雨慧允沛，因次形成了以水运为主的交通体系。</p>>
</div>
<div class="pic">
<img src="7.png">
<p>日本城堡，从公元前后到近代有着将近2000多年的历史，其建筑主要目的是为了御敌于外，因此大多的结构坚固，实战性强。</p>
</div>
<div class="pic">
<img src="8.png">
<p>中国古建筑以木材、砖瓦为主要的建筑材料，以木构架为主的主要结构方式。</p>
</div>
<div class="pic">
<img src="9.png">
<p>联合院，中国清朝时期皇家园林，前身为清涟院</p>
</div>
<div class="pic">
<img src="10.png">
<p>竹楼主要指两层以上的竹结构楼房。</p>
</div>
</div>
</div>
</body>
</html>

复制代码

最佳答案

月排行榜 / 总排行榜

不二如是

2017-3-15 16:28:01

.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;
}

复制代码

虽然没看你的效果图，但是我猜你的这个CSS设置中 - width没有px

原文请看：0 0 5 1 - 瀑布流排版 - 【高情怀必备】

跳转到最佳答案楼层

不二如是 · 发表于 2017-3-15 16:19:26

怎么不一样？

向一朵朵鲜花 · 发表于 2017-3-15 16:26:09

没有像你那样，按行挤在一起，，，，

不二如是 · 发表于 2017-3-15 16:28:01

.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;
}

复制代码

虽然没看你的效果图，但是我猜你的这个CSS设置中 - width没有px

原文请看：0 0 5 1 - 瀑布流排版 - 【高情怀必备】

向一朵朵鲜花 · 发表于 2017-3-15 16:30:02

不二如是发表于 2017-3-15 16:28
虽然没看你的效果图，但是我猜你的这个CSS设置中 - width没有px

原文请看：0 0 5 1 - 瀑布流排版 - 【 ...

好了 3q
0-0

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