0

我喜欢 Windows 应用商店应用程序的网格外观，并尝试使用标准 Web 技术（IE10 及更高版本、FF、Chrome、Safari）重新创建它。Windows 应用商店应用程序中的网格垂直滚动，内容被拆分为您必须自上而下阅读的列。

到目前为止，我有一个以固定高度水平滚动的 div：

.scroll-horizontal {    
   overflow-x:scroll;
   overflow-y:hidden;
   white-space: nowrap;
}

这工作正常，但子元素翘曲存在问题。它们通常在彼此下方排列。但是如果达到元素的高度，我需要它们换行到下一列。这是一个小提琴示例和我要存档的图像： 在此处输入图像描述

如何让子元素像带有 CSS 的 Windows 8 App 网格一样包装？

4

2 回答 2

1

找到了解决方案：如果内容达到元素的高度， CSS3列会让内容换行：

    -webkit-column-fill: auto;
    -webkit-column-width: 320px;
    -webkit-column-gap: 32px;
    -moz-column-fill: auto;
    -moz-column-width: 320px;
    -moz-column-gap: 32px;
    column-fill: auto;
    column-width: 320px;
    column-gap: 32px;
于 2013-08-23T12:36:13.243 回答
1

请参考Metro UI css。它将满足您的所有需求，因为在这里编写整个 css 是耗时的。

于 2013-08-22T10:13:03.333 回答