【问题标题】: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 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表格来实现列布局。但这并不意味着其他人不会喜欢它,所以感谢您的回答。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-06-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多