3

我正在尝试将 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;
}
4

1 回答 1

1

I think the issue here is that you've set a fixed height on your container. With the fixed height, the columns can't grow, so the rendering engine keeps making more columns to fit your content inside the container.

If you turn off overflow: hidden in your fiddle, you'll see that there actually a bunch more columns overflowing out of the side of your box. The padding just allows part of one of them to be visible.

The root cause here is height balancing. 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.

Since you've set the height, height balancing says that the browser will fix columns to that height, and will create as many columns as it needs to display your content.

You'll need to remove your fixed height if you want your columns to grow and flow correctly and obey your column-count property.

于 2016-10-07T12:23:44.237 回答