14

我今天偶然发现了一个非常棒的项目（CSS3 PIE），它可以使用 CSS3 圆角、阴影和渐变，即使在 IE6、IE7 和 IE8 中使用 CSS 设置和通常的 CSS3 表示法。

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

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

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

4

4 回答 4

8

Maybe the Columnizer jQuery Plugin?

Unfortunately, it doesn't parse your stylesheet and look for the relevant properties like CSS3 PIE does (a very convenient feature).

Both CSS3 PIE and that plugin rely on JavaScript.

于 2011-04-14T23:56:25.880 回答
5

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

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

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

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

您可以查看我的博客文章，其中详细介绍了问题，您还可以查看重新排列/转置美国各州的工作示例。或者您也可以在 GitHub 上观看该项目，并在新版本发布时获取更新（或报告您可能遇到的问题）。

于 2011-08-02T11:43:18.923 回答
3

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

于 2013-07-20T23:46:27.443 回答
1

你可能想试试这个..

CSS3 多列

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

我会看看我能不能找到我的测试用例放在小提琴上

更新

这是示例小提琴

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

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

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

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

于 2011-04-15T00:19:50.173 回答