使用视口宽度的 CSS3 列

Question

我正在尝试使用 CSS3 列模拟 Windows 8 横向滚动和多列布局，但我希望列具有固定宽度，或者像我在 my fiddle 中所做的那样，视口宽度。

现在，无论我使用哪种单位，列似乎都会自动适应容器 div，而不管我设置的宽度如何。

在my fiddle 中，我将列设置为35vw，这给了我2 个等宽的列。据我所知，这应该导致 2 个完全可见的列和第三列的一部分，但这并没有发生。如果我将px、em 或% 设置为单位，也会发生这种情况。

这是浏览器的默认行为还是我遗漏了什么？

Answer 1

新东西，所以我不得不试验了一段时间。我认为如果 cols 像这样溢出，它会扩展以将任何部分隐藏的列的剩余部分推入溢出。至少在尚未识别非前缀版本的 Chrome 中。将其设置为 30vw，它将填充 3 列。由于我怀疑滚动条，33 不起作用。

那个小提琴也有一些小错误/故障。时不时让我感到冰冷。

Answer 2

我设法通过摆弄正在发生的事情来找出答案，所以我将分享我的发现和解决方案。

1. 有两种使用 CSS 设置列的方法：column-count 设置容器宽度应容纳多少列，而不管列宽如何；并使用column-width 设置最佳列宽，在容器宽度内容纳尽可能多的列。

   这意味着如果我设置column-width: 300px，浏览器将尝试在容器中容纳尽可能多的列，宽度为大约 300px。根据内容量和视口宽度，列宽会发生变化。

   根据规范，这是所需的浏览器行为。 (MDN, W3C)

2. 在我的第一个小提琴中，我试图设置column-width: 35vw，而容器具有width: 100%（继承）。使用容器宽度，我发现上面解释的行为正在发生，因为容器宽度从未明确设置。考虑到这一点，我希望我可以通过 javascript 或任何其他 CSS 属性设置容器宽度，但无济于事。

3. 摆弄，我将容器设置为position: absolute，然后我期望的行为发生了。然后我试了float: left，也成功了。

   现在，据我测试，这不适用于 webkit（Opera 开发最新，Chrome 稳定最新）。根据需要显示 IE11 和 Firefox 最新版本。也许是一个错误或什么的。这可以在my latest fiddle 中查看。