16

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

4

7 回答 7

8

替换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>

于 2017-03-23T10:54:25.400 回答
6

在你的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>

希望它有所帮助

于 2017-03-21T15:21:28.253 回答
3

如果您添加display: flex;到ID，那么它在所有浏览器中都可以正常工作，#people并且您不需要上课。display:inline-block;.keeptogether

您可以检查代码片段：

#people {
 -webkit-column-count:4;
 -moz-column-count:4;
 column-count:4;
 -webkit-column-gap:.5em;
 -moz-column-gap:.5em;
 column-gap:.5em;
 display: flex;
 padding-bottom:2px;
 font-size:18px;
 line-height:21px;
}

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

我希望它有帮助。

于 2017-03-23T05:12:03.167 回答
1

为什么你需要给予display: inline-block？使用column属性的概念是将整个给定内容划分为等宽的列。因此，如果您删除内部 div，所有内容都会正确对齐到给定数量的列中。

如果您inline-block从当前代码中删除，这也有效。

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


/* you don't need this property
.keeptogether {
  display: inline-block;
  width: 100%;
}
*/
<div id="people">
  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> 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> 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> 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>

于 2017-03-21T06:11:25.333 回答
1

我对 WordPress 主题使用了类似的方法。它在 Firefox 中看起来相当不错，并且在 Chromium/Chrome 中显示两列而不是四列以实现全屏宽度。

当我增加每页的帖子数（砖）时，列数会增加以填满空间。

Chrome 在升级到下一列之前似乎渲染了三个或更多的砖块。

于 2018-02-13T19:25:59.800 回答
0

在 Chrome 80.0 遇到此问题后，解决方案来自对问题的评论：

.childbrick {
    break-inside: avoid-column;
}

这解决了 Chrome 中奇怪的缺少列以及如果不使用display:inline-block;.

该评论引用了此解决方法的 Firefox 问题，但我发现 Firefox 版本 73 没有此类问题。

于 2020-03-02T10:39:01.340 回答
0

根据我对这个问题的经验，我发现 -webkit 需要排在最后（否则我猜它会尝试使用非 webkit 并失败）

        column-count: 2; 
        -moz-column-count: 2; 
        -webkit-column-count: 2;
于 2017-04-19T12:33:59.587 回答