盐城网站建设 -> 信息中心 -> 网络编程 -> CSS/HTML

纯css 瀑布流实现方法

日期:2019-02-12 21:42:29 阅读:148次 【 字体:

<div class="masonry"> 
            <div class="item"> 
                <div class="item_content content-lar"> 1
                </div> 
            </div> 
            <div class="item"> 
                <div class="item_content content-sma"> 2
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-mid"> 3
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-sma"> 4
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-mid"> 5
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-lar"> 6
                </div> 
            </div> 
            <div class="item"> 
                <div class="item_content content-sma"> 7
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-lar"> 8
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-lar"> 9
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-sma"> 10
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-mid"> 11
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-mid"> 12
                </div> 
            </div>
            <!-- more items --> 
        </div>
.masonry { 
                -moz-column-count:3; /* Firefox */
                -webkit-column-count:3; /* Safari 和 Chrome */
                column-count:3;
                -moz-column-gap: 2em;
                -webkit-column-gap: 2em;
                column-gap: 2em;
                width: 80%;
                margin:2em auto;
            }
            .item { 
                padding: 2em;
                margin-bottom: 2em;
                -moz-page-break-inside: avoid;
                -webkit-column-break-inside: avoid;
                break-inside: avoid;
                background: #f60;
            }
@media screen and (max-width: 800px) { 
                .masonry { 
                    column-count: 2; // two columns on larger phones 
                } 
            } 
            @media screen and (max-width: 500px) { 
                .masonry { 
                    column-count: 1; // two columns on larger phones 
                } 
            }


暂无...


上一篇:input不可编辑锁定的3种方法
下一篇:纯CSS实现移动端导航左?#19968;?#21160;的方..
最新文章
会员 客服 QQ 电话 充值 工单
Top

24小时客服热线

0515-87213010

18036323215

多特vs奥格斯堡
重庆快乐十分走势图爱彩乐 四川金7乐开奖基本走势图 体彩四川金七乐走势 pk10机器人免费版 极速赛计划图 91同款约啪app 安徽快3走势图号码分布最近50期 内蒙快三预测专家 四川快乐12中奖助手下载 广东时时11选五技巧 四川时时平台网站 北京时时网址 天津市快乐十开奖走势图 上海快三走势图分布图 江苏快三官网下载 开奖特马料