我正在尝试使用 CSS3 列来模拟 Windows 8 横向滚动和多列布局，但我希望列具有固定宽度，或者就像我在小提琴中所做的那样，视口宽度。
现在，无论我使用哪种单位，似乎列都会自动适应容器 div，而不管我设置的宽度如何。
在我的小提琴中，我将 columns 设置为35vw，这给了我 2 个等宽的列。据我所知，这应该会导致 2 个完全可见的列和第三列的一部分，但这并没有发生。如果我设置px,em或%作为单位，也会发生这种行为。
这是浏览器的默认行为还是我遗漏了什么？
问问题
965 次
2 回答
0
我设法通过摆弄正在发生的事情来找出答案，所以我将分享我的发现和解决方案。
使用 CSS 设置列有两种方法：
column-count设置容器宽度应容纳多少列，而不考虑列宽；并column-width设置最佳列宽，在容器宽度内安装尽可能多的列。这意味着如果我设置
column-width: 300px浏览器将尝试在容器内容纳尽可能多的列，宽度约为300 像素。根据内容的数量和视口宽度，列宽会发生变化。在我的第一个小提琴中，我试图
column-width: 35vw在容器width: 100%（继承）时进行设置。使用容器宽度，我发现上面解释的行为正在发生，因为容器宽度从未明确设置。考虑到这一点，我希望我可以通过 javascript 或任何其他 CSS 属性设置容器宽度，但无济于事。摆弄着，我将容器设置为
position: absolute，然后我期望的行为发生了。然后我尝试float: left了，它也有效。现在，据我测试，这不适用于 webkit（Opera 开发最新，Chrome 稳定最新）。根据需要显示 IE11 和 Firefox 最新版本。也许是一个错误或什么的。这可以在我最新的 fiddle中检查。
于 2014-09-07T01:16:14.517 回答
0
新东西，所以我不得不尝试一段时间。我认为如果 cols 像这样溢出，它会扩展以将任何部分隐藏的列的剩余部分推入溢出。至少在尚未识别非前缀版本的 Chrome 中。将其设置为 30vw，它将填充 3 列。由于我怀疑的滚动条，33 不起作用。
那个小提琴也有一些小问题/故障。不时让我感到寒冷。
于 2014-09-05T10:17:28.903 回答