内容继续在下一列的三列布局

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

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

我不知道这是可能的，只是用CSS和JS的HTML也是必要的（我不是Web前端的人）。

任何帮助，这将不胜感激。

2017-01-29 Sasha Fonseca

你可以做你正在使用CSS3 columns问。而不是使用引导程序来创建三个连柱，使用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>

注意这里的引导容器是没有必要的，只是增加了它在上下文因为你提到你使用它。

来源

2017-01-29 17:05:46

感谢您的意见。在达到列中可用的最大垂直空间之前，似乎这会继续下一列的内容。有没有办法让左列上的文本只在中间行时在左列的垂直空间不足时继续使用？ –

@SashaFonseca你正在寻找'column-fill'属性;更新了这个例子。这是一个体面的参考：https：//css-tricks.com/almanac/properties/c/column-fill/ –

这就是它！非常感谢@尼克 –

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

https://jsfiddle.net/L0pLkxp6/

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

来源

2017-01-29 17:05:00 Jason

感谢您的输入@Jason。我知道你是第一个回答，但我发现尼克的初步答案（编辑之前）更加明确，所以我将他标记为解决方案。 –

内容继续在下一列的三列布局

回答

相关问题