使用 CSS column-count: 2 在 Chrome 中平衡两列上的对象

Question

我创建了一个仪表板解决方案，其中高度不断变化的对象堆叠在两列中。目标是将对象分布在列上，如下所示：

1. 第一个对象在第一列的左上角
2. 下一个对象低于该对象，除非没有足够的空间容纳对象的整个高度，如果对象不适合，则将其放在第二列中。
3. 如果对象不适合第二列中的可用空间，则将对象分布在列上以实现高度相同的两列并使容器 div 可滚动。

对象没有固定的高度，一个对象可以在星期一为空，而在星期二占据整个左列。

我创建了以下内容：

<div id='container'>
  <div id='columncontainer'>
    <span id='span1'>Block1</span>
    <span id='span2'>Block2</span>
    <span id='span3'>Block3</span>
  </div>
</div>

.

#container{
  overflow-y: auto;
  height: 300px;
  width: 400px;
}

#columncontainer {
  column-count: 2;
}

#columncontainer > span {
  width: 100%;
  display: inline-block;
}

#span1 {
  height: 200px;
  width: 200px;
}

#span2 {
  height: 200px;
  width: 200px;
}

#span3 {
  height: 50px;
  width: 200px;
}

我在此解决方案中遇到的问题在此处演示并出现在 Chrome 浏览器中： https://jsfiddle.net/3620qgvs/

在此示例中，列中的最后两个对象很容易适合第二列 (200+50=250

但是，前两个对象在第一列中呈现，而高度为 50px 的 #span2 具有第二列的整个 300px。

我确实想将对象放在一起，所以使用块而不是 inline-block 不是一个选项。 （这会将对象分成两列）

我尝试过的将对象放在（浮动）线或（弹性）网格上的实现都有同样的问题；如果左列中有两个高度较大的对象，则右列中的两个高度较小的对象之间会有很多垂直空白（此处演示的块 2 和 4 之间的空白：https://jsfiddle.net/3kd9r8ye/2/）。这就是我使用列计数的原因，因为它的功能类似于“float: down”（不存在）

任何解决方案或替代方法？

Answer 1

事实证明，在 Chrome CSS 属性中，“orphans”和“widows”默认设置为 2，而其他浏览器似乎保持为 1。

为了解决我描述的问题，应该在#columncontainer 上添加以下 CSS 属性：

orphans: 1
widows: 1

这将阻止 Chrome 尝试坚持一列。

进一步参考：

• https://bugs.chromium.org/p/chromium/issues/detail?id=638530
• https://drafts.csswg.org/css-break/#widows-orphans
• https://drafts.csswg.org/css-break/#unforced-breaks

drafts.c​​sswg.org 的摘录：

If a block contains fewer lines than the value of widows or orphans, the rule simply becomes that all lines in the block must be kept together.

Answer 2

这是column-count 属性中常见的问题。对于您的问题，您可以使用以下解决方案，该解决方案适用于极少数css changes，而且我在您的问题中注意到您复制了导致 HTML 无效的元素 id。所以以后避免它，使用css classes。

#container {
  overflow-y: auto;
  height: 300px;
  width: 400px;
  border: 1px solid black;
}

#columncontainer {
  /* column-count: 2;*/
  border: 1px solid red;
  width: 100%;
}

#columncontainer>span {
  /*width: 100%;*/
  display: inline-block;
  background-color: #CCCC;
  margin: 5px;
  border: 1px solid blue;
  width: calc(50% - 15px);
}

.block1,
.block2 {
  height: 200px;
  width: 200px;
}

.block3 {
  height: 50px;
  width: 200px;
}

<div id='container'>

  <div id='columncontainer'>
    <span id='span1' class="block1">Block1</span>
    <span id='span2' class="block2">Block2</span>
    <span id='span3' class="block3">Block3</span>
  </div>

</div>