页面上 HTML 标签的 Python 排序/CSS 列化答案

【问题标题】：Python Sorting of HTML Tags on Page / CSS Columnization页面上 HTML 标签的 Python 排序/CSS 列化
【发布时间】：2011-07-23 16:51:21
【问题描述】：

此代码/标记...

<ul id="tag-directory" class="clearfix">
        <li py:for="tag in tags"><a href="${h.url_for(controller='/media', action='index', tag=tag.slug)}">${tag.name}</a> (${tag.media_count_published})</li>
</ul>

使用这种样式...

#tag-directory {
    clear: both;
}

#tag-directory li {
    width: 50%;
    float: left;
}

在浏览器中按字母排序，例如...

A1               A2
A3               B1
B2               B3
B4               C1
C2               C3

但我想要的是……

A1               B3
A2               B4
A3               C1
B1               C2
B2               C3

我该怎么做？

入驻 Adam Wulf 的 JQuery 插件：Columnizer。

将 Wulf 的三个 .js 文件上传到服务器；那么……

HTML 文件头部的这个标记：

<head>
<script src="/scripts/third-party/jquery.js" type="text/javascript" ></script>
<script src="/scripts/third-party/autocolumn.js" type="text/javascript" charset="utf-8"></script> 
<script> 
    $(function(){
        $('.wide').columnize({width:360});
    });
</script> 
<style> 
    .wide {clear:both;}
</style> 
</head>

还有正文中的这个标记：

<div class="wide"> <!--per styling in head -->
    <ul id="tags" class="clearfix">
        <li py:for="tag in tags"> <!-- Python code dynamically generating hyperlinked li elements -->
            <a href="${h.url_for(controller='/linkedmedia', action='index', tag=tag.slug)}">${tag.name}</a> (${tag.linkedmedia_count_published})
        </li>
    </ul>
</div>

就是这样。可能可以压缩 Javascript 以加快页面的加载时间。 CSS3 在简单性方面更快、更快并且通常更优雅的解决方案，但是 Wulf 的 Javascript 是一种可以容忍的 hack，可以在 IE 上获得与现代浏览器中的 CSS3 相同的外观。（IE 是多么痛苦……！）纯 CSS 解决方案不适用于动态生成的超链接 li 元素列表。下面发布的 IE8 中如何显示生成的 Columnizer 解决方案的屏幕截图...

【问题讨论】：

总是 2 列还是“n”列宽？
目前，只有 2 个......但如果“n”列可能还可以。只要它在页面上布局就可以了。

标签： python html css

【解决方案1】：

如果 Internet Explorer 缺乏支持对您来说不是问题，您可以使用 CSS3 columns。

根据评论更新：

由于您的项目都在一个列表中（我假设您希望保持这种状态），这很棘手。您可能想看看this（第 2 页和第 3 页处理假列），但老实说，我建议考虑 CSS3 列并允许使用 IE 的人在一列中查看列表。（不理想，但Do websites need to look exactly the same in every browser? :-)）

据我所知，其他选项包括将列表分成两个元素或涉及 Javascript 软糖。

【讨论】：

@David...是的，你是对的。 Nada...在任何版本的 IE 中对它的零支持。真可惜。我不认为我可以带着它飞。不过，我很欣赏这个建议。
@David...在探索了几乎所有选项之后，确实，CSS3 解决方案似乎是最优雅和最安全的。但是，我真的希望这些列可以在 IE 上运行……所以我选择了 Adam Wulf 的 JQuery 插件 Columnizer：welcome.totheinter.net/columnizer-jquery-plugin 我已经对代码进行了一些修改。我已将代码作为上述问题的附录。