鱼C论坛

 找回密码
 立即注册
查看: 3602|回复: 4

[已解决]在 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 - 瀑布流排版 - 【高情怀必备】


想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-3-15 16:19:26 | 显示全部楼层
怎么不一样?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-15 16:26:09 | 显示全部楼层
没有像你那样,按行挤在一起,,,,
17623DK6YY_K%${Q7Q)@9`3.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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 - 瀑布流排版 - 【高情怀必备】


想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

 楼主| 发表于 2017-3-15 16:30:02 | 显示全部楼层
不二如是 发表于 2017-3-15 16:28
虽然没看你的效果图,但是我猜你的这个CSS设置中 - width没有px

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

好了  3q
0-0
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-23 17:55

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表