指定列数为 3 时显示第 4 列

Question

我正在尝试将 css 'column-count' 与 CSS 填充结合使用，并且我观察到，如果我指定列数为 3，如果内容没有，浏览器会呈现第四列的一部分'不适合。如下图

这是一个 JSFidle -> https://jsfiddle.net/w40jcykp/1/

我在 Chrome 和 Edge 中看到了这一点。这是一个已知问题，还是有解决方法？

谢谢。

下面的 CSS。

.newspaper {
    column-count: 3;
    min-height:144px;
    height:144px;
    padding:20px;
    column-gap:10px;
    border: 1px solid black;
    overflow:hidden;
}

Answer 1

我认为这里的问题是您在容器上设置了固定高度。在固定高度的情况下，列不能增长，因此渲染引擎会不断制作更多列以适应容器内的内容。

如果您在小提琴中关闭overflow: hidden，您会发现实际上还有更多列从您的盒子一侧溢出。 padding 只允许其中一个可见。

这里的根本原因是身高平衡。 From MDN:

CSS3 列规范要求列高必须为 平衡：即浏览器自动设置最大列 高度，以便每列中内容的高度为 大约相等。 Firefox 会这样做。

但是，在某些情况下，设置最大值也很有用 明确列的高度，然后从以下位置开始布局内容 第一列并根据需要创建尽可能多的列，可能 向右溢出。因此，如果高度受到约束，则由 在多列上设置 CSS 高度或最大高度属性 块，每列都允许增长到那个高度，不能再进一步 在添加新列之前。这种模式对于 布局。

由于您已设置高度，高度平衡表示浏览器会将列固定到该高度，并会根据需要创建尽可能多的列来显示您的内容。

如果您希望列正确增长和流动并遵守column-count 属性，则需要移除固定高度。