CSS 列和同等内容

Question

我想在我的网站周围使用 CSS3 列，因为它在宽页面上为用户提供了更好的用户体验。但是，如果我使用 CSS3 列，有时左列已满(比如 20 行文本)而右侧只有 2 行文本。我可以使用纯 css3(也许是 Flexbox)使其具有相同数量的内容吗？或者我需要 JS 来解决这个问题吗？

请注意，我说的不是等高，而是等量的内容:)

Answer 1

您需要指定一个 height 属性。

来自Mozilla docs :

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.

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.