保持CSS3多列宽度不变

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

如中所示，我的项目将与前一个项目堆叠在一起，而不是从上到下扩展，而是从左到右

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

目前使用：

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

我的问题示例（调整窗口大小以查看宽度变化）：

有没有办法保持宽度不变？我只需要Xpx宽度的列，随着添加更多列，页面将根据需要水平扩展

w3规范指出，保持固定的唯一方法是“必须指定所有长度值（在水平文本中，这些值是：‘宽度’、‘列宽’、‘列间距’和‘列规则宽度’）

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

有没有办法保证每列的Xpx宽度

---

感谢您的帮助。

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

对于

.multicl

css样式，您已经为

webkit

浏览器设置了样式，如上所述。由于

-webkit

（浏览器前缀）仅适用于

webkit

浏览器，因此需要将每个浏览器前缀添加到相同的样式中，以便在其他浏览器上正确显示

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

在

webkit

、

firefox

或

opera

浏览器上查看时，这里有一个更新版本可以正确显示您的内容（您可以为Internet Explorer添加样式，只需使用：

-ms-

）

---

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

我刚刚注意到这个答案。但我的问题中缺少厂商前缀是为了简洁。这不是宽度不同的原因。WC3规范实际上说，即使给定特定的宽度，它仍然是灵活的。我想知道是否有办法覆盖它。仍然没有找到解决方案。你说它保持灵活性是什么意思？是否希望每列保持一定的宽度而不调整大小？正确。没有调整大小。我想定义宽度并使所有列都符合该宽度，而不考虑容器宽度（目前不是默认行为）

.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;
}