Question

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

我已经用一个吸引人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 */
}

分页列布局

1 个答案: