最近遇到一个CSS的排版问题,在一个父元素下的多个子元素瀑布流排版
正常情况下每个子元素大小相同的情况下排版如下,这个没有太大的问题
如果每个子元素的宽度相同,而高度不相同,就会出现空白,如下
想要的效果是子元素之间的空白保持一致,因为1号元素的高度远小于4号元素,所以下一行的子元素5号位置会定在相对于4号元素的高度的位置,尽管1号元素留下了很多的空白
要达到填补空隙的效果,只需要在元素的样式中加入如下代码
父元素 column-count: 4;/*设定每行元素的个数*/
column-gap: 0;/*设定列列间距*/
子元素 break-inside: avoid;/*控制子元素分解为单独的列,以免列表内容跨列破坏布局*/
效果如下
初步的解决办法就是这样,有更好的再继续更新