我有一个分为4列的文本,它在Safari中完美运行我不知道为什么我只能在Google 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%
}
<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>
解决方法
添加显示：flex;你的css中的#people id：
#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>
希望它有所帮助
