此代码/标记...
<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 元素列表。下面发布了生成的 Columnizer 解决方案如何出现在 IE8 中的屏幕截图...
最佳答案
如果 Internet Explorer 缺乏支持对您来说不是问题，您可以使用 CSS3 columns .
响应评论的更新:
由于您的所有元素都在一个列表中(我假设您希望保持这种状态)，这很棘手。你可能想看看 this (第 2 页和第 3 页涉及假列)，但老实说，我建议考虑使用 CSS3 列，并允许那些使用 IE 的人在一列中查看列表。 (不理想，但 Do websites need to look exactly the same in every browser? :-))
据我所知，其他选择包括将列表拆分为两个元素或涉及 Javascript 软糖。
关于在页面/CSS 列化上对 HTML 标签进行 Python 排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6757612/