我有一个文本分为4列,它在Safari中工作得很好,我不知道为什么我在谷歌Chrome中只能看到2列。
使用Chrome 55.0.2883.95(64位)进行测试
如有任何帮助,我们将不胜感激。
#people{
-webkit-column-count:4;
-moz-column-count:4;
column-count:4;
-webkit-column-gap:.5em;
-moz-column-gap:.5em;
column-gap:.5em;
padding-bottom:2px;
font-size:18px;
line-height:21px;
}
.keeptogether{
display:inline-block;
width:100%
}
个字符
8条答案
按热度按时间7gcisfzg1#
将
display: flex;
添加到您的css中的#people
ID:个字符
希望有帮助
js5cn81o2#
将
display:inline-block
替换为display:block
。根据caniuse的说法,对于Chrome问题,您应该在容器上添加
-webkit-perspective:1;
。个字符
44u64gxh3#
如果您将
display: flex;
添加到#people
ID,那么它在所有浏览器中都可以正常工作,并且您不需要.keeptogether
类的display:inline-block;
。你可以查看代码片段:
个字符
希望能帮上忙。
dffbzjpn4#
为什么需要给予
display: inline-block
?使用column
属性的概念是将整个给定的内容划分为等宽列。因此,如果删除inner-div,所有内容将正确对齐到给定的列数中。如果从当前代码中删除
inline-block
,这也可以工作。个字符
qfe3c7zg5#
我在一个WordPress主题中使用了类似的方法。它在Firefox中看起来相当不错,在Chromium/Chrome中显示两列而不是四列,以实现全屏宽度。
当我增加了每页的文章数量(砖块)时,列的数量增加了,以填满空间。
Chrome似乎会在进入下一列之前渲染三个或更多的砖块。
vi4fp9gy6#
在Chrome 80.0遇到这个问题后,解决方案来自对这个问题的评论:
字符串
这修复了Chrome中奇怪的列缺失以及如果不使用
display:inline-block;
会发生的列拆分。评论引用了此解决方案的Firefox问题,但我在Firefox版本73中没有发现此类问题。
n7taea2i7#
从我对这个问题的经验中,我发现-webkit需要放在最后(否则我猜它会尝试使用非webkit并失败)
字符串
nbysray58#
你只需要删除
.keeptogether
规则,它就可以正常工作了。另外,我建议你总是添加column-width
规则,以使它更具响应性,因为该规则设置了每列的最小大小。个字符