                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /瀑布流布局

css3實現(xiàn)的瀑布流的bug？

如這兩張圖所示，css3實現(xiàn)的方法，在瀏覽器上出現(xiàn)了這樣的情況，最后一行較長的圖片的尾部會出現(xiàn)在屏幕的最上面。而第一行圖片的top不是在一條線上，請問這是什么情況？我用的是chorm49。其他的瀏覽器也出現(xiàn)這樣的情況。

三3心

2016-03-25

源自：瀑布流布局 5-1

關(guān)注問題我要回答

3279

操作

收起

8 回答

飛天意大利面神獸回答被采納 +3 積分
2016-07-18

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

2 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

三3心提問者

非常感謝！

2016-07-19 回復(fù) 有任何疑惑可以回復(fù)我~

蠟筆小新威回復(fù) 三3心提問者

解決了嗎？

2016-09-09 回復(fù) 有任何疑惑可以回復(fù)我~

三3心提問者回復(fù) 蠟筆小新威

已經(jīng)解決了

2016-09-12 回復(fù) 有任何疑惑可以回復(fù)我~

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