请选择进入手机版 | 继续访问电脑版

收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

蓝色理想最新研发动态 新增登录提醒插件 - 用至我的站点 地图任务一定要做 - 给官方提建议

论坛活动及任务 地图和邮件任务请多用悬赏提问 热夏来袭，选一款蓝色理想的个性T恤吧！

MIUI手机主题设计大赛，奔驰大奖等你拿！ 想加薪？！蓝色理想招聘提供你更多机会 悬赏答疑，赚取积分兑奖品！

经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › CSS3瀑布布局

发新帖

查看: 283|回复: 7

[CSS] CSS3瀑布布局 [复制链接]

csszhan　楼主

初级会员 

帖子: 46
体力: 83
威望: 0

发表于 2012-5-17 17:30:34 |显示全部楼层

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3瀑布布局</title>
<style>
        .container{
                -webkit-column-width:160px;
                -moz-column-width:160px;
                -o-colum-width:160px;
                -webkit-column-gap:1px;
                -moz-column-gap:1px;
                -o-column-gap:1px;
        }
        div:not(.container){
                -webkit-border-radius:5px;
                -moz-border-radius:5px;
                border-radius:5px;
                background:#D9D9D9;
                border::#CCC 1px solid;
                display:inline-block;
                width:157px;
                position:relative;
                margin:2px;
        }
        .title{
                 line-height:80px; font-size:18px; color:#900;
                 text-align:center;
                 font-family:"Microsoft YaHei";
        }
</style>
</head>

<body>
<section>
        <div class="container">
            <div style="height:80px" class="title">纯CSS3瀑布布局</div>
        <div style="height:260px"></div>
        <div style="height:65px"></div>
        <div style="height:120px"></div>
        <div style="height:145px"></div>
        <div style="height:90px"></div>
        <div style="height:145px"></div>

<div style="height:160px"></div>
        <div style="height:65px"></div>
        <div style="height:230px"></div>
        <div style="height:140px"></div>
        <div style="height:85px"></div>
        <div style="height:20px"></div>
        <div style="height:145px"></div>
        <div style="height:50px"></div>
              <div style="height:65px"></div>
        <div style="height:230px"></div>
        <div style="height:140px"></div>
        <div style="height:85px"></div>
        <div style="height:20px"></div>
        <div style="height:145px"></div>
        <div style="height:50px"></div>
        <div style="height:145px"></div>
        <div style="height:160px"></div>
        <div style="height:240px"></div>
    </div>
</section>
</body>
</html>

提示：您可以先修改部分代码再运行

西部数码云主机4G内存500G仅需423元

使用道具举报

温和

帖子: 440
体力: 1181
威望: 1
居住地: 北京市昌平区

发表于 2012-5-17 22:07:41 |显示全部楼层

数据一旦超过一屏，载入慢的时候，就会发现不足了

一个css3小站

租服务器，上51IDC

使用道具举报

银牌会员 

帖子: 546
体力: 1330
威望: 0
居住地: 广东省广州市

发表于 2012-5-17 22:17:39 |显示全部楼层

现在各大网站图片展示都喜欢搞这个东西，折腾

装修效果图www.home0668.com

使用道具举报

csszhan　楼主

初级会员 

帖子: 46
体力: 83
威望: 0

发表于 2012-5-18 09:24:45 |显示全部楼层

折腾呗。中国人的精神！

使用道具举报

李寻饭

帖子: 3471
体力: 6911
威望: 2
居住地: 北京市昌平区

发表于 2012-5-18 10:01:33 |显示全部楼层

这只适合做成横向滚动的页面吧.

另外代码里夹带的广告代码给你删除了

使用道具举报

csszhan　楼主

初级会员 

帖子: 46
体力: 83
威望: 0

发表于 6 天前 |显示全部楼层

4321285 发表于 2012-5-18 10:01
这只适合做成横向滚动的页面吧.
另外代码里夹带的广告代码给你删除了

嗯！忘记编辑了

使用道具举报

初级会员 

帖子: 7
体力: 60
威望: 0

发表于 5 天前 |显示全部楼层

不支持IE 是个悲剧

使用道具举报

新手上路 

帖子: 5
体力: 11
威望: 0

发表于 4 天前 |显示全部楼层

只能演示，不是很实用

rs-buy.com

使用道具举报

发新帖

Archiver|手机版|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-5-28 03:51 , Processed in 0.104765 second(s), 6 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部