Veran, tengo el siguiente codigo html (he quitado parte del codigo para que no os perdais):
{% load staticfiles %}
<html>
<body>
<h1>Lista de animales</h1>
<table>
{% for alfa in animales %}
<td>
<img src="{% static alfa.foto %}" />
<a href='http://127.0.0.1:8000/datos_animal/{{alfa.id}}'>{{alfa.id}}. {{alfa.ncomun}}:<br>{{alfa.ncientifico}}</a>
</td>
{% endfor %}
</table>
</body>
</html>
Y quisiera que, mejor que eso, que al llegar al "borde" de la pantalla siguiese abajo. Algo como en este boceto:
Actualizo: He solucionado provisionalmente el problema. Codigo html:
<table>
{% for alfa in animales %}
<td>
<img src="{% static alfa.foto %}" />
<br>
<a href='http://127.0.0.1:8000/datos_animal/{{alfa.id}}'>{{alfa.id}}. {{alfa.ncomun}}:<br>{{alfa.ncientifico}}</a>
</td>
{% if forloop.counter|divisibleby:8 %}
<tr/>
{% endif %}
{% endfor %}
</table>
Pero hay un problema: La pantalla de mi PC es grande, por lo que ahi puedo hacer que se muestre bien las imagenes, pero en una pantalla mas pequeña puede haber fotos que pasen al otro lado de la pantalla. La solucion es que el divisibleby en vez de recibir un valor fijo, sea por ejempo, el ancho del fondo entre 250. ¿Que variable en html obtiene el tamaño de la pantalla?