Python对页面HTML标签排序 / CSS列布局

1 投票

1 回答

1222 浏览

提问于 2025-04-16 21:53

这段代码/标记...

<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 是个可以接受的解决办法，让 IE 显示出和现代浏览器中 CSS3 一样的效果。（IE 真是个麻烦...！）纯 CSS 的解决方案对动态生成的包含超链接的 li 元素列表不起作用。下面是 IE8 中 Columnizer 解决方案的效果截图...

在这里输入图片描述

浏览器兼容性 CSS布局 HTML标签页面加载优化 jquery插件动态内容处理 javascript压缩样式效果

1 个回答

如果你不在乎 Internet Explorer 的兼容性问题，你可以试试 CSS3 列。

根据评论的更新：

因为你的所有项目都在一个列表里（我猜你是想保持这样），所以处理起来有点棘手。你可以看看这个（第2和第3页讲的是假列），但老实说，我建议你考虑使用 CSS3 列，让使用 IE 的人看到的列表还是一列。（虽然不是最理想的，但网站在不同浏览器中需要完全一样吗？ :-)）

据我所知，其他的选择可能需要把列表分成两个部分，或者用 Javascript 来搞定。

回答于 2025-04-16 由 Python大师

分享举报

Python对页面HTML标签排序 / CSS列布局

1 个回答

撰写回答