CSS列，从上到下然后从左到右 [英] CSS Columns, Top to Bottom then Left to Right

问题描述

我正在为应用构建报纸样式的版式。我的页面分为8列，这些列应先垂直填充然后水平填充。

I'm building a newspaper style layout for an app. My page is split into 8 columns, and the columns should fill vertically first then horizontally.

如果没有足够的内容填充页面，则这些列仍应填充垂直先在页面右侧保留空白。当前，它们首先水平填充，然后在内容下面留空白。

If there isn't enough content to fill the page, the columns should still fill vertically first leaving white space to the right of the page. Currently they fill horizontally first leaving white space bellow the content.

我已经尝试过使用CSS列，但它似乎总是填充页面的宽度，我可以

I've tried this with CSS columns but it seems to always fill the width of the page, I can't see a way to change this.

我也尝试过使用flex box，但是flex wrap不会像CSS列那样在div内部中断/包装。 / p>

I've also tried with flex box, but flex wrap will not break/ wrap inside of a div like CSS columns will.

.flex-col {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 300px;

  p {
    width: 250px;
  }
}

.css-col {
  columns: 3;
}

在这里查看我尝试过的示例。

推荐答案

在 .css-col 中添加 column-fill：auto; 应该可以为您提供所需的内容，但是您需要将高度添加到 .css-col

Adding column-fill: auto; to .css-col should give you what you are looking for, but you need to add a height to .css-col

这篇关于CSS列，从上到下然后从左到右的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！