CSS3多列布局IE解决方法[关闭]答案

【问题标题】：CSS3 multi column layout IE workaround [closed]CSS3多列布局IE解决方法[关闭]
【发布时间】：2011-08-05 23:20:21
【问题描述】：

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

它使用 *.htc 文件 来完成这个诡计并使其对开发人员真正透明（如设置它并忘记它 - 创建新页面或更改现有页面时无需额外的脚本调用（提供你不改变CSS））。

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

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

【问题讨论】：

这里有一个用于 CSS 多列布局的 polyfill（后备）：csscripting.com/css-multi-column
@DavidFreitas：无法在 IE9 中运行，也不是更新版本 here。所以我现在使用Columnizer jQuery Plugin。没有 CSS 解析，但其他方面都可以。

标签： css internet-explorer layout css-multicolumn-layout

【解决方案1】：

也许是Columnizer jQuery Plugin？

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

CSS3 PIE 和那个插件都依赖于 JavaScript。

【讨论】：

我认为这不是一个真正的选择，因为它不使用 CSS3，其中支持开箱即用的多列布局...与 CSS3 PIE 类似的方法将是最好的，因为您可以在 CSS 中设置它并忘记它。无需在脚本中进一步调用任何内容。
我同意。一个选项是使用Modernizr 来检测本机列支持，如果不使用该插件。它显然远不如 CSS3 PIE 方便，但我不认为有任何东西与您正在寻找的东西相匹配。我真的希望我错了。
我仍然接受了你的回答，因为它尽可能接近多列 CSS3 布局。
@Robert Koritnik：因为我回答了你的问题，所以我最终为另一个答案实施了一个快速而肮脏的解决方案：stackoverflow.com/questions/6225968/…。如果您添加了对调整插件大小的支持，那将非常有用。
我很可能会在下一个版本中。在 GitHub 上观看该项目，当它出现时您会收到通知。 :)

【解决方案2】：

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

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

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

你可能想试试这个..

CSS3 Multi Columns

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

我看看能不能找到我的测试用例来摆弄

更新

这里是 Example fiddle

注意（和免责声明）自从我做这个演示以来已经有好几年了，它不会从小提琴原生地工作（你会看到浏览器实际支持的内容），-为了让脚本工作 CSS 有在一个链接文件中，我认为我不能在小提琴上做，它把它放在内联

上半部分显示了支持的内容或下载后脚本可以做什么，下半部分是根据记录的期望（基于表格的）模型（尽管记得我说过这是几年前的事了）

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

不管怎样，只是把它作为一种选择——也许比我更精明的人可以改进脚本？

【讨论】：

我不太喜欢这个解决方案，因为它使用HTML表格来实现列布局。但这并不意味着其他人不会喜欢它，所以感谢您的回答。