用于在多列布局中中断的 JavaScript

Question

我在固定高度的元素中使用多列 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>

Answer 1

您可以将您的分栏元素放入一个具有您需要的宽度和 overflow:hidden 的容器中。然后使用 JavaScript 克隆您的列元素，将克隆元素放入您的容器中(紧跟在原始元素之后)并为克隆元素指定 margin-left: -100% 或相对定位。