Question

我正在尝试使用Bootstrap构建一个布局，其中我有三个偶数列（我已经完成了这个）。我想要一种方法让段落从最左边的列开始，当它们到达该列的末尾时（滚动被禁用，这意味着是一个静态帧），内容从顶部继续在中间列上。 / p>

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

我不确定这是否可能只用CSS和JS的HTML也是必要的（我不是Web前端人）。

对此有任何帮助将不胜感激。

Answer 1

如果您不介意使用CSS3，那么您可以使用列计数。

    div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    height: 100px;
    overflow:hidden;
}

Answer 2

您可以使用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容器，只是因为你提到你正在使用它而将其添加到上下文中。

三列布局，其中内容在下一列继续

2 个答案: