我在固定高度元素中使用多列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>
答案 0 :(得分:2)
您可以将柱状元素放入具有所需宽度的容器中并溢出:隐藏。然后使用JavaScript克隆你的columned元素,将克隆放入容器中(直接放在原始容器之后),并给克隆左边缘:-100%或相对定位。