css - 分页列布局

Question

我正在尝试实现多列布局，其中填充了宽度相同(列宽)但高度不同的元素。这个想法是采用某种形式的分页，您可以在其中滚动容器并将其调整为仅显示完整的列，或者单击按钮以查看下一列或上一列。

我放了一个 plunker here来说明这个想法。

我的问题是，无论我做什么，我似乎都无法摆脱似乎有默认最小值的列间距。我也不知道间隙大小是如何确定的，所以我真的无法计算我应该滚动容器多少。任何帮助将非常感激。谢谢!

Answer 1

问题是您在 .el 元素上设置的宽度，将此宽度更改为 100%，您的间隙将被移除。

看到这个 FIDDLE

HTML:

<div id="cols">
    <div>ELEMENT</div>
    <div>ELEMENT</div>
    <div>ELEMENT</div>
    ...
</div>

CSS:

#cols {
    height: 100%;
    -webkit-column-width: 25em;
    -moz-column-width: 25em;
    -ms-column-width: 25em;
    -o-column-width: 25em;
    column-width: 25em;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    -ms-column-gap: 0;
    -o-column-gap: 0;
    column-gap: 0;
}
#cols > div{
    background:gold;
    height:50px;
    margin:5px 0;
    display:inline-block;
    width:100%; /*<-- this line */
}