css - 列填充 : balance not working in Chrome?

Question

column-fill: balance; 应该“在列之间平均分配内容”。它似乎在 Firefox 和 Edge 中工作正常。但是 Chrome(和 Opera)似乎真的不喜欢第二列，大部分都是空的。

好像是跟元素的高度有关，但是具体怎么弄不清楚。在第一个示例中，我希望第二段位于第二列中，但 Chrome 将它们都放在了左列中，而将右列留空。

第二个示例显示了一个不同的类似不平衡示例。

    div {
        border: solid blue 3px;
        column-count: 2;
        column-fill: balance;
    }
    p {
        border: solid red 3px;
        break-inside: avoid;
    }
    .second { height: 100px; }

<div>
    <p>plain</p> 
    <p class=second>.second</p>
</div>

<hr>

<div>
    <p>plain</p> 
    <p>plain</p> 
    <p>plain</p> 
    <p class=second>.second</p>
    <p>plain</p> 
</div>

这是一个错误吗？我是否遗漏了所有其他浏览器供应商也遗漏的东西？

更重要的是，我怎样才能让这样的东西发挥作用，甚至可能诉诸卑鄙的黑客手段？

更新:显然是not limited to exactly 2 columns

Answer 1

如果我误解了你的问题，我深表歉意。由于听起来您的目标是将第二段放在下一列中，因此我将 break-before: column 添加到您的 .second 样式中。请参阅第一个代码片段。

此外，column-fill: balance 样式应该尝试使用所有列。它不在您的示例中，因为您向每个元素添加了 break-inside: avoid 。听起来你想要 column-fill: auto 来代替。 column-fill: auto 样式在 Chrome 上不起作用，除非您还指定了多列容器的高度。请参阅第二个代码片段。

以下是很好的引用:

• 多列概览:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns
• column-fill 的细节，包括关于 Chrome 的行为与其他浏览器不同的注释:https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill

仅添加break-before: column

    div {
        border: solid blue 3px;
        column-count: 2;
        column-fill: balance;
    }
    p {
        border: solid red 3px;
        break-inside: avoid;
    }
    .second { 
        height: 100px;
        break-before: column;
    }

<div>
    <p>plain</p> 
    <p class=second>.second</p>
</div>

<hr>

<div>
    <p>plain</p> 
    <p>plain</p> 
    <p>plain</p> 
    <p class=second>.second</p>
    <p>plain</p> 
</div>

更改为使用 column-fill: auto 和 height

    div {
        border: solid blue 3px;
        column-count: 2;
        column-fill: auto;
        height: 200px;
    }
    p {
        border: solid red 3px;
    }
    .second { 
        height: 100px;
        break-before: column;
    }

<div>
    <p>plain</p> 
    <p class=second>.second</p>
</div>

<hr>

<div>
    <p>plain</p> 
    <p>plain</p> 
    <p>plain</p> 
    <p class=second>.second</p>
    <p>plain</p> 
</div>