用于多列布局中断的JavaScript

时间:2011-07-08 19:55:55

标签: javascript css css3 css-multicolumn-layout

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

1 个答案:

答案 0 :(得分:2)

您可以将柱状元素放入具有所需宽度的容器中并溢出:隐藏。然后使用JavaScript克隆你的columned元素,将克隆放入容器中(直接放在原始容器之后),并给克隆左边缘:-100%或相对定位。