用于多列布局中断的JavaScript

2019年8月3日 186次阅读

我在固定高度元素中使用多列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克隆您的columned元素,将克隆放入容器中(直接放在原始容器之后),并给克隆左边距：-100％或相对定位.

点赞