JavaScript 用于多列布局中的中断答案

【问题标题】：JavaScript for breaks in multi-column layoutJavaScript 用于多列布局中的中断
【发布时间】：2017-08-28 00:37:23
【问题描述】：

我在固定高度元素中使用多列 CSS 布局，因此浏览器会根据需要创建尽可能多的列来包含内容。新列将始终出现在其他列的右侧，但我想在三列之后中断，并让列 4、5、6 出现在 1、2、3 下方。我想这可以用 JS 完成，但我不知道该选择什么。

.columns {
    width: 360px;
    font-size: 100%;
    text-align: justify;
    height: 300px;
    display: block;
    padding-bottom: 30px;
       -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
       -moz-column-width: 100px;
    -webkit-column-width: 1000px;
       -moz-column-gap: 40px;
    -webkit-column-gap: 40px;
}

<div class="columns"><p>Lorem ipsum.../p></div>

【问题讨论】：

标签： javascript css css-multicolumn-layout

【解决方案1】：

您可以将列元素放入具有所需宽度的容器中并溢出：隐藏。然后使用 JavaScript 克隆您的列元素，将克隆放入您的容器中（直接在原始元素之后）并为克隆提供左边距：-100% 或相对定位。

【讨论】：