Question

我正在开发一个基于Django的网站以获得乐趣，并想知道是否有人知道如何解决这个问题。我想在模板中的表格中显示图像，如图库。有谁知道如何做到这一点？我已经尝试了一个多维列表，但我无处可去。

Answer 1

我认为问题比Django更多的CSS相关。

您的所有图片尺寸是否相同？如果是，只需浮动所有这些并让边界div打破图像。你的模板看起来像这样（忽略内联CSS！）：

<div style="width:400px">
{% for image in image_list%}
    <div style="float:left; width:100px; height:100px;">
        {{ image.whatever }}
    </div>
{% endfor%}
</div>

这会给你一个包含4列的“表格”。

如果您的图片有不同的宽度和高度，我会选择类似display:inline-block的内容，本文将介绍它的工作原理：

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

编辑如果您只想将列表转换为表格，我猜您可以使用此模板：

{% for image in image_list %}
    {% if forloop.first %}
        <tr>
    {% endif %}

    <td>{{ forloop.counter }} - {{ image }}</td>

    {% if forloop.last %}
        </tr>
    {% else %}
        {% if forloop.counter|divisibleby:"4" %}
            </tr><tr>
        {% endif %}
    {% endif %}
{% endfor %}

但是这段代码没有经过测试！我刚写了：）

Answer 2

你为什么不用字典？然后你可以用这样的东西来表示点(0,0), (1,1), (0,1)等，

mydict = {0: [0, 1, 2],
          1: [0, 1, 2],
          2: [0, 1, 2]}

其中列表的元素是您的图像名称。

{0: ["image1.jpg", "image2.jpg", "image3.jpg"] .. }

在这种情况下，mydict[0][0]引用第一行的第一个元素，依此类推。

-

要访问模板中的字典（Django Doc），您可以使用类似

的内容

# (key would be 0, value would be a list [0,1,2,3..]
{% for key, value in mydict.items %}
    {% for img in value %}
      <img src="{{img}}">
    {% endfor %} 
{% endfor %}

Answer 3

您真的需要使用表格以您需要的方式对齐图像吗？如果您需要获得类似http://blog.mozilla.com/webdev/files/2009/02/gallery-view.jpg的内容，请查看inline-block CSS属性。所有主流浏览器都支持它，包括IE6 +（稍加修复）。

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 4

这是其他人回答的简单方法：

目标是在显示每个第4张图像后创建一个新行。您只需要一维列表即可。

一种选择是在每次第4次之后关闭。您可以使用forloop.counter，也可以在创建每个标记后使用{％cycle'''''''''％}。注意：我在猜测你的HTML结构。 {％cycle'''''''％}可能会一样好。

以下是周期的作用：http://docs.djangoproject.com/en/dev/ref/templates/builtins/#cycle

如果您使用s浮动到左侧，请使用相同的循环，但在每个第4个之后添加换行符。

如何在Django模板系统中显示图像表？

4 个答案: