使用css3的column属性,内容被截断的解决方法
用column样式做瀑布流的效果,遇到了同一列的内容被截断到其他列的问题,如下效果:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c85a757419e4367d6bf3170130ff7846.png)
在CSS3规范里,各列的高度是均衡的。浏览器会自动调整每列会填充多少文本,然后让整个布局的高度保持均衡一致。而我们在做这种瀑布流的类似布局的时候,往往只需要设置每个容器的宽度,然后高度通过内容填充来自适应。所以,浏览器在处理的时候,为了保持高度的均衡分配,会将我们的布局截断,然后造成布局错乱。
解决方法是在子项目加上样式:
注意是子容器不是父容器哦!
height: 100%;
overflow: auto;
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/20a3bb2bd227e0fc6259a28a49f62692.png)