Question

I have images read out of a database by Python in the form

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

giving me an output on a static html-page like

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

I would like the images to be displayed in a grid of five columns. I have tried to do position them in a <table> during output but could not get a working syntax with all <tr> and <td>s. I was wondering if I could just put them in a <div> and let my .css Stylesheet handling the grid-layout?

I don’t know what could be the most elegant solution, generating a well-formatted but simple html-page generated by Python-code? I hope someone has a clue, hint, trick.

Thanks a lot in advance!

Answer 1

If all images have the same width you could wrap all the images in a container, give the container a width equal to the images width*5 and float the images. Check this fiddle: http://jsfiddle.net/YDUsz/

I don’t know python, so this might be stupid, but hopefully you’ll get what I mean:

<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;
}