0

我正在尝试创建一个最容易被描述为水平滚动 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？

谢谢你的帮助。

4

1 回答 1

2

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

对于您的.multicolcss 样式，您已经为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;
}

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

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

于 2012-12-09T19:03:30.690 回答