保持 CSS3 多列宽度静态

Question

我正在尝试创建一个最容易被描述为水平滚动 pinterest 的布局。

例如，我的项目可以与前一个堆叠起来，而不是从上到下延伸，而是从左到右。

到目前为止，CSS3 多列属性似乎正是我想要的。我唯一的问题是宽度是灵活的（尽管声明了列宽）。不同的浏览器窗口呈现不同大小的列。

目前使用：

.multicol {
    -webkit-column-width: 150px;
    -webkit-column-gap: 0;
    height: 400px;
    width: auto;
}

我的问题示例（调整窗口大小以查看宽度变化）：http://jsfiddle.net/pbg3r/4/

有没有办法保持宽度固定？我只想要 Xpx 宽度的列，随着添加更多，页面会根据需要水平扩展。

w3 规范说保持它固定的唯一方法是“所有长度值（在水平文本中，它们是：'width'、'column-width'、'column-gap' 和 'column-rule-width ') 必须指定。"

虽然我不确定如何为容器设置宽度并保持水平连续扩展的能力。即使我这样做了，它仍然不能保证设置的宽度。

有什么方法可以保证每列的宽度为 Xpx？

感谢您的帮助。

Answer 1

对于不同浏览器呈现不同大小列的问题，一个可能的答案很简单。

对于您的.multicol css 样式，您已经为webkit 浏览器设置了样式，就像上面一样。由于-webkit（这是一个浏览器前缀）仅适用于webkit 浏览器，因此您需要将每个浏览器前缀添加到相同的样式中，以便它在其他浏览器上正确显示。

这就是你应该使你的样式表看起来像这样：（如果你愿意，你可以去掉每个浏览器样式之间的空格）

.multicol {

/*webkit*/
-webkit-column-width: 150px;
-webkit-column-gap: 0;

/*moz*/
-moz-column-width: 150px;
-moz-column-gap: 0;

/*opera*/
-o-column-width: 150px;
-o-column-gap: 0;

height: 400px;
width: auto;
}

这是一个更新的fiddle，在webkit、firefox 或opera 浏览器上查看时可以正确显示您的内容（您可以为 Internet Explorer 添加样式，只需使用：-ms-）

您还需要为您在样式表中设置的任何其他样式添加浏览器前缀。