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克隆你的columned元素，将克隆放入容器中（直接放在原始容器之后），并给克隆左边缘：-100％或相对定位。

用于多列布局中断的JavaScript

1 个答案: