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

if expression do something else if expression do something else do something end end属性值仅适用于Firefox。

类似于Chrome的列数实际上是elseif。而在Firefox中，其实际上是column-fill

要使其在所有浏览器上均能正常工作，请使用column-count / 2。 More on this

列填充：天平无法在Chrome浏览器中使用？

1 个答案: