用Python生成的CSS网格中定位图像

Question

我用Python从数据库里读取了一些图片，格式是这样的：

for i in images:
    print >> htmlpage, "<img src='../folder/%s'>" % i

然后我在一个静态的HTML页面上得到了这样的输出：

<img src='../folder/image01.jpg'>
<img src='../folder/image02.jpg'>
<img src='../folder/image03.jpg'>
<img src='../folder/image04.jpg'>

我希望这些图片能以五列的网格形式显示。我尝试过在输出时用<table>来排版，但总是搞不定<tr>和<td>的语法。我在想，是不是可以直接把它们放在一个<div>里，然后让我的.css样式表来处理网格布局呢？

我不知道什么方法能生成一个格式良好但又简单的HTML页面，都是用Python代码生成的。希望有人能给我一些线索、提示或者小窍门。

非常感谢！

Answer 1

你需要添加一个计数器，这样才能知道在哪里结束当前的表格行（/TR）以及开始新的表格行（TR）。

在开始循环之前，先设置一个变量，比如叫它a，并把它的值设为1。

在你的循环里面，每次循环结束时，把a的值加1，也就是在循环的最后加上a++。

在a++之前，先加一个判断，看看a是否等于5，如果是的话，就打印出结束当前行的标记（/TR）和开始新行的标记（TR）。

Answer 2

我也觉得，使用表格是最合理的方法。

你有没有试过这样的做法：

print "<table>"
for i in range(len(image)):
    if i % 5 == 0:
            print "<tr><td>"
    print >> htmlpage, "<img src='../folder/%s'>" % image[i]
    if i % 5 == 4:
            print "</td></tr>"
if len(image) % 5 != 0:
    print "</td></tr>"
print "</table>"

Answer 3

如果所有的图片宽度都一样，你可以把这些图片放在一个容器里，然后把这个容器的宽度设置为图片宽度的5倍，再把图片浮动起来。你可以看看这个示例：http://jsfiddle.net/YDUsz/

我不太懂Python，所以可能说得不太好，但希望你能明白我的意思：

<div clas="image-wrapper">
for i in images:
    print >> htmlpage, "<img src='../folder/%s'>" % i
</div>

CSS:

.image-wrapper {
    width: (Image width * 5);
}
.image-wrapper img {
    float: left;
}