盐城网站建设 -> 信息中心 -> 网络编程 -> 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奥格斯堡
稳赚的生意 重庆时时开奖结果直播视频 天津时时11点结束吗 重庆时时综合分布走势图 北京pk赛车冠军走势图 365投注网 水晶宫 3d独胆毒胆预测 网上抢庄牛牛是骗局吗 传奇国际网站 重庆时时彩助赢软件 pk10冠军杀1码高手 8理财婆4肖4码 鱼丸游戏 奔驰宝马 pk106码倍投表图 欢乐生肖游戏上市