javascript - 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

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