                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /瀑布流布局

css3实现的瀑布流的bug？

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

三3心

2016-03-25

源自：瀑布流布局 5-1

关注问题我要回答

3216

操作

收起

8 回答

飞天意大利面神兽回答被采纳 +3 积分
2016-07-18

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

2 回复有任何疑惑可以回复我~

收起回答

三3心提问者

非常感谢！

2016-07-19 回复有任何疑惑可以回复我~

蜡笔小新威回复三3心提问者

解决了吗？

2016-09-09 回复有任何疑惑可以回复我~

三3心提问者回复蜡笔小新威

已经解决了

2016-09-12 回复有任何疑惑可以回复我~

慕仰5451901
2017-07-06

我的是谷歌上显示不出来，其他浏览器没问题，怎么回事大神给看看

.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;
}