列/文本 - 转到下一行

Posted 2023-03-05

【中文标题】列/文本 - 转到下一行

【英文标题】：Column / Text - Go to the next line

【发布时间】：2020-10-18 01:50:58

【问题描述】：

我想创建一个带有多个columns / rows 的navigation menu。对于parent element，我有一个固定的height。如何使溢出高度的columns / text 出现在下一行？请参阅下面的visual representation。

【问题讨论】：

寻找column-count它可能会帮助你解决这个问题。

【参考方案1】：

您可以将columns 属性用于自动列布局。

columns: 4;

.container 
  columns: 4;

<div class="container">
<h6>Title</h6>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<h6>Title</h6>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<h6>Title</h6>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<h6>Title</h6>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<h6>Title</h6>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>

您可以根据需要设置列的宽度。有多少列适合 300px，它放了那么多。例如 4 列适合 1200 像素的屏幕。

columns: 300px auto;

.container 
  columns: 300px auto;

<div class="container">
<h6>Title</h6>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<h6>Title</h6>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<h6>Title</h6>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<h6>Title</h6>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<h6>Title</h6>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>
<li>Some Category</li>

您可以通过MDN找到更多信息。