Question

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

同样，我的物品会与前一个物品叠加，而不是从上到下延伸，而是从左到右。

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

目前使用：

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

我的问题示例（调整宽度更改的窗口大小）：http://jsfiddle.net/pbg3r/4/

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

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

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

是否可以保证每列的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-）

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

保持CSS3 Multicolumn Width Static

1 个答案: