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样式表处理网格布局？

我不知道什么是最优雅的解决方案，生成由Python代码生成的格式良好但简单的html页面？我希望有人有线索，提示，技巧。

提前多多感谢！

Answer 1

如果所有图像具有相同的宽度，您可以将所有图像包装在容器中，为容器提供等于图像宽度* 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;
}

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

您需要添加一个计数器，以便检测结尾/ TR和新TR的位置。

在FOR循环之前设置变量，设置a = 1

在你的FOR循环中，在它的底部放一个++，每个循环增加1个。

在++之前有一个IF来检查并查看a = 5，在这种情况下你应该打印/ TR TR。

将图像定位在来自Python的CSS网格中

3 个答案: