中心固定宽度CSS3容器中的多列

Question

我正在使用CSS3 Multicolumns，其列宽设置为200px，使列数可以自由调整以适应不同的屏幕尺寸。

以下是我正在处理的代码：http://jsfiddle.net/kBPUX/

在我的1280px宽笔记本电脑上，当窗口从一到两扩展到四列时，列都居中。它工作得很好，但是当窗户最大化时，突然在四列，所有的柱子都突然离开，在右边留下一个丑陋的阴沟。

知道这是什么以及如何使列以任何分辨率为中心？

编辑：在玩了一些之后，我相信正在发生的事情是浏览器不想再制作任何列。列填充未指定，因此默认为自动并尝试尽可能匹配列高。添加更多列将导致具有不同高度的列。在这一点上，我想确保列在父容器中居中，而不是左对齐。

注意：这适用于Firefox，Chrome和IE9，这就是我所支持的。我绝对不会触及JQuery布局产品;它必须是纯CSS。

Answer 1

为什么不使用column-count？

http://jsfiddle.net/Svyy2/4/

另请查看div的{​​{1}}。如果您将它们设置为与width相同的width，则会遇到问题，因为columns＆gt; width+padding+border。例如，将其设置为90％。

Answer 2

截至今天，我不知道我的问题有任何工作解决方案，但我认为正确的解决方案是多列规范的列空间分布属性，但它不是任何浏览器都没有实现。