позиционирование изображений в CSS-сетке от Python

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

Если все изображения имеют одинаковую ширину, вы можете обернуть все изображения в контейнере, дать контейнеру ширину, равную ширине изображений * 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

Вам необходимо добавить счетчик, чтобы определить, куда должен идти конец / TR и новый TR.

Установите переменную перед циклом FOR, которая устанавливает a = 1

В вашемЦикл FOR, в нижней части которого поместите ++, который будет увеличивать на 1 каждый цикл.

Прямо перед a ++ есть IF, чтобы проверить и посмотреть, если a = 5, в этом случае вы должны вывести / TR TR.

Answer 3

Я также думаю, что таблицы являются наиболее разумным подходом.

Вы пробовали что-то вроде этого:

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>"