问答详情
源自：5-1 瀑布流布局实现方式比较

css3实现的瀑布流的bug？

56f4eff90001cd8a05000182.jpg

56f4effa0001323005000187.jpg

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

提问者：三3心 2016-03-25 16:02

个回答

  • 飞天意大利面神兽
    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;


    2
  • 慕仰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;
    }

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

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

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

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

    我也是啊

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

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

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

    我也出现这个问题了

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

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

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

    代码放出来看看呢

    0