Question

计算多列css属性时似乎存在一个错误，存在于我已签入的所有浏览器中（最新的Chrome，IE11和Firefox）。如果列表中有9个项目，并尝试将其拆分为4列，则最后一列始终为空。

是否有任何变通办法，将其拆分为3/2/2/2？提前致谢。

Array
(
[0] => Array
    (
        [ID] => 6407
        [NAME] => Kust
        [DATUM] => 20161110
        [DAG] => 1
        [TMAX] => 10
        [WEATHER] => 11
        [DD] => NW
        [FF] => 25
    )

[1] => Array
    (
        [ID] => 6407
        [NAME] => Kust
        [DATUM] => 20161111
        [DAG] => 2
        [TMAX] => 8
        [WEATHER] => 2
        [DD] => ZO
        [FF] => 8
    )

[2] => Array
    (
        [ID] => 6451

ul {
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  background-color: gray;
}
li {
  background-color: tomato;
}

Answer 1

http://caniuse.com/#feat=multicolumn

看起来column- *有很多不同浏览器的问题。在您的示例中，如果您要添加1个li元素，那么您可以看到它将填充第4列。我的猜测是它的可分性问题。

Answer 2

它的工作原理与它应该工作的方式相同，3个列中有足够的空间用于9个项目，这就是为什么它不进入第4个，减少高度，它将分成更多的列。或添加更多li，这将在第4栏

ul {
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  background-color: gray;
  height:50px;
}
li {
  background-color: tomato;
}

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

Answer 3

使用此：

.keeptogether{
display:inline-block;
width:100%
}

＆＃13;

ul {
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  background-color: gray;
}
li {
  background-color: tomato;
}
.keeptogether {
  display: inline-block;
  width: 100%
}

＆＃13;

<ul>
<div class="keeptogether">
  <li>item</li>
  <li>item</li>
  <li>item</li>
</div>
<div class="keeptogether">
  <li>item</li>
  <li>item</li>
</div>
<div class="keeptogether">
  <li>item</li>
  <li>item</li>
</div>
<div class="keeptogether">
  <li>item</li>
  <li>item</li>
</div>
</ul>

＆＃13;

CSS多列布局：不正确的列拆分

3 个答案: