CSS 列，从上到下然后从左到右

Posted 2023-03-07

【中文标题】CSS 列，从上到下然后从左到右

【英文标题】：CSS Columns, Top to Bottom then Left to Right

【发布时间】：2018-06-15 12:59:24

【问题描述】：

我正在为应用构建报纸风格的布局。我的页面分为 8 列，列应先垂直再水平。

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

我已经尝试过使用 CSS 列，但它似乎总是填满页面的宽度，我看不出有什么方法可以改变它。

我也尝试过使用 flex box，但 flex wrap 不会像 CSS 列那样破坏/包裹在 div 内。

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

  p 
    width: 250px;
  


.css-col 
  columns: 3;

See here for an example of what I have tried.

【参考方案1】：

将column-fill: auto; 添加到.css-col 应该可以满足您的需求，但您需要将height 添加到.css-col

【参考方案2】：

您似乎过早地关闭了 div。也许inline-flex 更接近。我不清楚这应该是什么样子

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


p 
  width: 250px;

<div class="flex-col">
  <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p>
  <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p>
  <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p>
  <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p>
  <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p>
  <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p>
  <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p>
</div>

https://codepen.io/Paulie-D/pen/mpBNBg