css3实现的瀑布流的bug?

来源:5-1 瀑布流布局实现方式比较

三3心

2016-03-25 16:02

56f4eff90001cd8a05000182.jpg

56f4effa0001323005000187.jpg

如这两张图所示,css3实现的方法,在浏览器上出现了这样的情况,最后一行较长的图片的尾部会出现在屏幕的最上面。而第一行图片的top不是在一条线上,请问这是什么情况?我用的是chorm49。其他的浏览器也出现这样的情况。

写回答 关注

8回答

  • 飞天意大利面神兽
    2016-07-18 14:49:21
    已采纳

    http://img.mukewang.com/578c7bcf0001ec2607160589.jpg

    -webkit-column-break-before: avoid;
    -webkit-column-break-after: avoid;
    -webkit-column-break-inside: avoid;


    三3心 回复蜡笔小新威

    已经解决了

    2016-09-12 09:51:11

    共 3 条回复 >

  • 慕仰5451901
    2017-07-06 11:26:24

    我的是谷歌上显示不出来,其他浏览器没问题,怎么回事大神给看看http://img.mukewang.com/595dada800014d8f12870903.jpg

    .in_service ul {
        width: 100%;
        column-count: 3;
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-width: 24em;
        -moz-column-width: 24em;
        -webkit-column-width: 24em;
        column-gap: 25px;
        -moz-column-gap: 25px;
        -webkit-column-gap: 25px;
        -webkit-column-break-before: avoid;
        -webkit-column-break-after: avoid;
        -webkit-column-break-inside: avoid;    
    }
    .in_service ul li{
        break-inside: avoid;
        -moz-page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -webkit-column-break-before: avoid;
        -webkit-column-break-after: avoid;
        -webkit-column-break-inside: avoid;    
        display: block;
    }

  • 风吹起了夏
    2016-11-30 16:15:38

    不用那么麻烦,将.container div设置为display:inline-block试一下

  • 星空下的小孩
    2016-07-05 11:24:58

    http://img.mukewang.com/577b287f0001ffd412440451.jpg

    我也是啊

  • 黑蝎
    2016-05-20 14:45:56

    http://img.mukewang.com/573eb28300018ec604130377.jpg这个问题让我头疼

  • 黑蝎
    2016-05-20 14:44:55

    我也出现这个问题了

  • 颜小夭
    2016-04-03 17:06:06

    我也遇到了这个问题,求大神来解答。http://img.mukewang.com/5700dcf900010b1c11500646.jpg

  • 佐刈
    2016-03-29 14:23:34

    代码放出来看看呢

瀑布流布局

瀑布流布局是网站比较流行的一种布局方式,教你实现三大方式

97758 学习 · 736 问题

查看课程

相似问题