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

标签 javascript html css twitter-bootstrap twitter-bootstrap-3

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

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

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

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

最佳答案

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

关于javascript - 三列布局,内容在下一列继续,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41923376/

相关文章:

javascript - 单击链接时滚动到另一个部分的特定 div

javascript - 如何告诉 iframe 将图像链接调整为给定的宽度和高度

javascript - D365 JavaScript 使用查找、选项集和货币字段创建新记录

javascript - 如何实现div重叠到另一个div?

Javascript 弹出功能

html - 在 Bootstrap 仪表板模板示例中设置特定的侧边栏宽度

php - 使用 PHP 创建数组

javascript - javascript中的多元素样式

html - 具有居中下拉区域的响应式选项卡菜单

html - 本地 CSS 样式表未链接