垂直排序项目，并水平滚动div

Question

我有一些div，我希望他们垂直填充主div，然后让主div水平滚动。

目前，我在子float:left上使用div，但它完全相反：它开始水平填充主div，然后主div滚动垂直。

行数可能因屏幕尺寸而异，因此我无法为此目的创建表格。

表+一些javascript hacks可能允许我这样做，但我更喜欢CSS（没有任何javascript）方式。因为此代码将在移动应用上运行，而javascript会降低网络应用的速度。

This is my current code和here's the result of my current code。但我想要像this这样的东西。

---

更新：正如@goliney建议的那样，似乎可以使用css-columns来完成。我现在创建了this example。

现在，存在以下两个问题：

• 虽然它运行良好，但仍需要一些javascript来确定页面中可见列数（列数）。虽然它是一个小的javascript过程，但是有没有办法在CSS中做到这一点？

• 另外，我更喜欢显示第五列，因此用户可以知道此列表可以水平滚动。但columns-count无法接受某些浮点值（如4.2），它只接受整数值。那我该怎么办？

Answer 1

正如@goliney建议的那样，css3列可以提供帮助。

我已经在此问题中创建了一个使用css3列的示例here。

但是，它需要javascript来计算列数，或者因为我的目标是平板电脑，我可以使用媒体查询创建一些预定义的类。

其次，我需要一些方法来显示下一列的一些内容，这样用户就可以知道这个列表可以水平滚动。

我发现，如果我设置margin-left，然后使用translateX将其重新放回正确位置，则会正确发生。

所以这是容器div的最终代码：

.main {
    column-count: 4;
    column-gap: 40px;

    height:480px;

    margin-left:80px;
    transform: translateX(-80px);
}

（我在这里删除了前缀属性，但它们在jsFiddle中可用）

这是final result in jsFiddle。