css3中column与break-inside: avoid

当我们在写瀑布流图片时，发现第一列没有显示完的部分在第二列顶部显示了，怎么解决这个问题呢？

先看问题：

 

 ul{
        width: 95%;
        column-count: 5;
        list-style: none;
        margin: 0 auto;
        column-gap: 10px;
  }
  ul li{
        border: 2px solid pink;
        box-sizing: border-box;
        margin-bottom: 10px;
  }

第三列、第四列多出来一部分文字当我们给li加上break-inside: avoid;

ul{
        width: 95%;
        column-count: 5;
        list-style: none;
        margin: 0 auto;
        column-gap: 10px;
 }
 ul li{
        border: 2px solid pink;
        box-sizing: border-box;
        margin-bottom: 10px;
        break-inside: avoid;
 }

让我们看一下效果：