                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /瀑布流布局

用CSS3的column分栏布局时元素被分割到两栏显示的问题有哪些比较好的解决方案？

用column分栏布局时元素会被平均分配到各列，如果在图片下加入标签写一些描述语句的话会导致最下面box的某些描述语句被分割到第二列顶部，有哪些比较好的解决方案呢？

阿龙丶

2015-10-13

源自：瀑布流布局

关注问题我要回答

3408

操作

收起

2 回答

慕侠8500357
2019-05-18

在使用bootstrap的项目中，使用了.card-columns来进行瀑布流形式加载，但发现页面宽度小于576是就容易发生内容折断的情况。经观察bootstrap源码，原来在576以上宽度时给内部card设置了display:inline-block的属性。给全部媒体查询设置后即解决问题。

效果： http://e-art.top/page/friendlyLink.html

来源： https://weibo.com/1731935180/HuIqMhLnP

0 回复有任何疑惑可以回复我~

收起回答

weibo_学无止境当读书_0
2016-07-05

给元素加一个-webkit-column-break-inside:avoid; 比如如果你用的ul加li的无序列表元素，那么就给li加这个css属性。具体哪些浏览器支持，你自己去测一测，webkit内核的加上前缀是没问题的。需要指出的是，虽然国内一票的国产浏览器都声称是webkit内核，但是表现上还是没有chrome做得好。比如说就这个例子，目前版本的chrome能够尽量让列的高度均匀，即它可能是通过计算决定被分割的列是应该留在上一列还是分到下一列，国内的webkit内核（360jisu）就没这么细。没有经过深入的测试，有不对的地方见谅。