列数不适用于Chrome

Question

我有一个分为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>

Answer 1

在您的CSS中添加display: flex;您的#peopleID：

#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>

希望能有所帮助

Answer 2

替换display:inline-block为display:block.

根据caniuse,对于Chrome问题,您应该添加-webkit-perspective:1;容器.

#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;
 -webkit-perspective:1;
}

.keeptogether{
  display: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>