CSS3多列布局IE解决方法

Question

今天偶然发现了一个非常great project (CSS3 PIE)，即使在IE6，IE7和IE8中使用CSS设置和常用的CSS3表示法，也可以使用CSS3圆角，阴影和渐变。

它使用* .htc文件来实现技巧并使其对开发人员来说非常透明（如设置它并忘记它 - 在创建新页面或更改现有页面时没有其他脚本调用（提供）你不改变CSS））。

我想知道是否可以使用多列布局的类似内容。浮动不是一种选择，因为内容不是从上到下排列 - 从左到右，而是从左到右 - 从上到下......

有人为CSS3多列布局开发类似的东西吗？

Answer 1

也许是Columnizer jQuery Plugin？

不幸的是，它没有解析你的样式表并寻找像CSS3 PIE那样的相关属性（一个非常方便的功能）。

CSS3 PIE和该插件都依赖于JavaScript。

Answer 2

应按列顺序流动的列表的另一种解决方案（如在电话簿中）

我问这个问题主要是因为我必须显示大约1000个用户的列表。这种列表很长，涉及很多滚动。所以我需要一个解决方案来将这些用户放在列中，这样它们也可以从左到右依次从上到下逐列流动。 CSS3多列布局提供了我所需要的，但浏览器支持是问题所在。他们仍然不支持IE9，我的用户主要使用IE（8或9）。因此，我需要一个使用CSS2.1

的解决方案

这就是我编写 jQuery插件的原因，它采用了一组设置为float: left/right;或display: inline-block;的元素并转换它们以便它们被订购按列布局顺序。

插件重新排序元素，不添加任何列包装或任何东西。它只是重新排列元素，因此它们似乎在列而不是行中流动。

您可以查看详细问题的blog post，还可以查看重新排列/转置美国各州的工作示例。或者您也可以watch the project on GitHub在新版本发布时获取更新（或报告您可能遇到的问题）。

Answer 3

如果您有简单的列表项，这可能就足够了 https://github.com/hamsterbacke23/multicolumn-polyfill

Answer 4

你可能想试试这个......

<强> CSS3 Multi Columns

自我测试以来已经有一段时间了，但它确实意味着您使用建议的属性，因此它可以用作增强功能

我会看看我是否可以找到我的测试用例放入小提琴

<强>更新

这是 Example fiddle

备注（和免责声明）自从我做这个演示以来已经过了几年，它不会从小提琴本地工作（你将看到的是浏览器实际支持的内容）， - 用于CSS的脚本工作在一个链接文件中，我不认为我可以做一个小提琴，它把它内联

上半部分显示支持的内容或脚本可以执行的操作，如果您下载它，底部是根据recs的（基于表格）模型的预期（尽管记得我说这是我做了几年后的事情）

Safari和Firefox都没有匹配“Expected：Table Mockup demo”，但是我在本地测试的所有浏览器看起来都相同..有很好的整齐偶数列，IE7得到50％正确它有3列但只使用其中2列?? - 没有浏览器标题跨越多行，无论是原生还是脚本，所以我把它归结为“尚未决定的功能”;）

无论如何只是把它扔出去作为一个选项 - 也许比我更精明的人可以改进剧本？