指定列数为 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

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

如果您在 fiddle 中关闭 overflow: hidden，您会发现实际上有更多的列从框的侧面溢出。 padding 只允许其中之一的一部分可见。

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

The CSS3 Column specification requires that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal. Firefox does this.

However, in some situations it is also useful to set the maximum height of the columns explicitly, and then lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. Therefore, if the height is constrained, by setting the CSS height or max-height properties on a multi-column block, each column is allowed to grow to that height and no further before adding new column. This mode is also much more efficient for layout.

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

如果您希望您的列正确增长和流动并遵守您的 column-count 属性。

，您需要移除固定高度

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

4th column is shown when specifying column-count of 3

css

column-count

css-multicolumn-layout