javascript - 三列布局，内容在下一列继续

Question

我正在尝试使用 Bootstrap 构建一个布局，其中我有三个偶数列(我已经做到了)。我想要一种方法让段落从最左边的列开始，当它们到达此列的末尾时(禁用滚动，这意味着是一个静态框架)内容从顶部继续到中间列。

当它到达中间栏的底部时，它应该继续在最右边的栏上，到达最后它只是隐藏剩余的内容。可以折叠这些段落，并相应地调整跨栏的内容。

我不确定仅使用 CSS 是否可行，JS 的 HTML 也是必需的(我不是 Web 前端人员)。

如有任何帮助，我们将不胜感激。

Answer 1

您可以使用 CSS3 columns 执行您要求的操作.不要使用 bootstrap 创建三个偶数列，而是使用 CSS:

.col-overflow-3 {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  height: 140px;
  column-fill: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-overflow-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
  </div>
</div>

请注意，此处的 Bootstrap 容器不是必需的，只是将其添加到上下文中，因为您提到您正在使用它。