列/文本 - 转到下一行答案

【问题标题】：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它可能会帮助你解决这个问题。

标签： html css sass flexbox grid

【解决方案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找到更多信息。

【讨论】：