列数不适用于Chrome [英] Column-count is not working in Chrome
本文介绍了列数不适用于Chrome的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我将文本分成4列，并且在Safari中完美运行我不知道为什么我只能在Google Chrome浏览器中看到2列。
测试过Chrome 55.0.2883.95（64位）
任何帮助将不胜感激。
#people {-webkit-column-count：4; -moz列数：4;列数：4; -webkit柱 - 间隙：.5em; -moz柱 - 间隙：.5em;柱隙：.5em;填充底：2px的;字体大小：18像素; line-height：21px;}。keeptogether {display：inline-block;宽度：100％}
< div id = people> < DIV类=同页>一种与LT峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> ; fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br><峰; br> B<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br><峰; br>℃温峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br>< / DIV>< DIV类=同页> d<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> ; fhdjsklfhs<峰; br><峰; br> E<峰; br> fhdjsklfhs<峰; br><峰; br> F<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br><峰; br> G<峰; br> fhdjsklfhs<峰; br> fhdjskl FHS<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br><峰; br> H<峰; br> fhdjsklfhs<峰; br><峰; br I标记<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br><峰; br> J< < br>< / div>< div class = keeptogether> L< br> fhdjsklfhs< br> fhdjsklfhs< br>< br>< br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br><峰; br> M<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs< BR> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br><峰; br将N<峰; br> fhdjsklfhs<峰; br><峰; br> O<峰; br> fhdjskfhs< br>< br> p< br> fhdjskfhs< br> fhdjsklfhs< br>< span class = yes>< br>< / span>< / div>< div class = keeptogether> ; Q<峰; br><峰; br> R<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br><峰; br> S<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br><峰; br> T<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br><峰; br> U<峰; br><峰; br> V<峰; br> fhdjsklfhs<峰; br> ; fhdjsklfhs<峰; br> fhdjsklfhs<峰; br><峰; br> W<峰; br><峰; br> X<峰; br><峰; br> Y<峰; br> fhdjsklfhs<峰; br><峰; br> Z<峰; br> fhdjsklfhs<峰; br>< ; / div>< / div>
解决方案
在您的css中添加 display：flex; 到您的 #people id：
#people {display：flex; -webkit-column-count：4; / * Chrome，Safari，Opera * / -moz-column-count：4; / * Firefox * / column-count：4; -webkit柱 - 间隙：.5em; -moz柱 - 间隙：.5em;柱隙：.5em;填充底：2px的;字体大小：18像素; line-height：21px;}。keeptogether {display：inline-block; width：100％;}
< div id = people> ; < div class =keeptogether> A<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> <峰; br> B<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> <峰; br>℃温峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> < / DIV> < div class =keeptogether> d<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> <峰; br> E<峰; br> fhdjsklfhs<峰; br> <峰; br> F<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> <峰; br> G<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> <峰; br> H<峰; br> fhdjsklfhs<峰; br> <峰; br I标记<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> <峰; br> J<峰; br> <峰; br> K<峰; br> fhdjsklfhs<峰; br> < / DIV> < div class =keeptogether> L<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> <峰; br> M<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> <峰; br将N<峰; br> fhdjsklfhs<峰; br> <峰; br> O<峰; br> fhdjsklfhs<峰; br> <峰; br> P<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> < span class =yes>< br>< / span> < / DIV> < div class =keeptogether> Q<峰; br> <峰; br> R<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> <峰; br> S<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> <峰; br> T<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> <峰; br> U<峰; br> <峰; br> V<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> fhdjsklfhs<峰; br> <峰; br> W<峰; br> <峰; br> X<峰; br> <峰; br> Y<峰; br> fhdjsklfhs<峰; br> <峰; br> Z<峰; br> fhdjsklfhs<峰; br> < / div>< / div>
I have a text splitted in 4 columns and it works perfectly in Safari I don't know why I can see just 2 columns in Google Chrome.
Tested with Chrome 55.0.2883.95 (64-bit)
Any help would be greatly appreciated.
#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%
}
<div id=people>
<div class=keeptogether>
A<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>B<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>C<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
</div>
<div class=keeptogether>
D<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>E<br>
fhdjsklfhs<br>
<br>F<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>G<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>H<br>
fhdjsklfhs<br>
<br>I<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>J<br>
<br>K<br>
fhdjsklfhs<br>
</div>
<div class=keeptogether>
L<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>M<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>N<br>
fhdjsklfhs<br>
<br>O<br>
fhdjsklfhs<br>
<br>P<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<span class=yes><br></span>
</div>
<div class=keeptogether>
Q<br>
<br>R<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>S<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>T<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>U<br>
<br>V<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>W<br>
<br>X<br>
<br>Y<br>
fhdjsklfhs<br>
<br>Z<br>
fhdjsklfhs<br>
</div>
</div>
解决方案
Add display: flex; to your #people id in your css:
#people{
display: flex;
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
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%;
}
<div id=people>
<div class="keeptogether">
A<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>B<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>C<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
</div>
<div class="keeptogether">
D<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>E<br>
fhdjsklfhs<br>
<br>F<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>G<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>H<br>
fhdjsklfhs<br>
<br>I<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>J<br>
<br>K<br>
fhdjsklfhs<br>
</div>
<div class="keeptogether">
L<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>M<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>N<br>
fhdjsklfhs<br>
<br>O<br>
fhdjsklfhs<br>
<br>P<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<span class="yes"><br></span>
</div>
<div class="keeptogether">
Q<br>
<br>R<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>S<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>T<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>U<br>
<br>V<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>W<br>
<br>X<br>
<br>Y<br>
fhdjsklfhs<br>
<br>Z<br>
fhdjsklfhs<br>
</div>
</div>
Hope it helped
这篇关于列数不适用于Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
