JavaScript 用於多列布局中的中斷

Question

我在固定高度元素中使用多列 CSS 布局，因此瀏覽器會根據需要創建包含內容的列。 新列將始終出現在其他列的右側，但我想在三列之后中斷，並使列 4、5、6 出現在 1、2、3 下方。 我想這可以用 JS 完成，但我不知道 select 是什么。

.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 克隆您的列元素，將克隆放入您的容器中（直接在原始元素之后）並為克隆提供左邊距：-100% 或相對定位。