在制作瀑布流格式的时候，一开始没有发现这个问题，当我只有两行的时候，每相隔一个div的大小一样的时候，我发现我的第一列的div一小部分内容跑到第二列中去了，这使我 很无解，目前我还没有想到解决的方法用瀑布流的写法，用js进行布局倒是可以解决这个问题。
这是我的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>瀑布流格式</title> <style> .contain{ width: 500px; height: 600px; overflow: hidden; overflow-y: scroll; margin: auto; column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; } .item{ width: 240px; height: 100px; background: saddlebrown; margin-bottom: 2px; } </style> </head> <body> <div class="contain"> <div class="item" style="height: 100px"></div> <div class="item" style="height: 80px"></div> <div class="item" style="height: 100px"></div> <div class="item" style="height: 80px"></div> <div class="item" style="height: 100px"></div> <div class="item" style="height: 80px"></div> <div class="item" style="height: 100px"></div> <div class="item" style="height: 80px"></div> <div class="item" style="height: 100px"></div> <div class="item" style="height: 80px"></div> </div> </body> </html>这是我的效果图：
我在尝试用css来解决这个问题，如果大家有什么好的建议，请大家能告诉我一下，我也学习一下。谢谢
