Question

我正在尝试用逻辑平铺图像，如果有偶数量的图像 - 平铺它们（每行2个）然后继续下一行，如果只有一个图像 - 居中，如果有是奇数个图像 - 平铺图像但是最后一个图像是中心的。

<table style="border-spacing: 0px; margin: 0 auto; width: 100%">
<tbody>
    <tr>{% for item in event.Items %}{% if forloop.counter|divisibleby:2 %}
        <td style="margin-top: 5px;">
        <p style="text-align: center; letter-spacing:0px; font-family:Noto Sans, Helvetica; font-weight:700; font-size:16px; padding: 15px 0;">{{ item.Name }}</p>
        <a href="{{ item.ProductURL }}"><img src="{{ item.ImageURL }}" style="width: 250px;" /></a></td>
    </tr>
    <tr>{% endif %}{% endfor %}
    </tr>
</tbody>

我也一直在尝试使用{% if event.Items|length == 1 %}，{% elif forloop.last and forloop.counter|divisibleby:2 == False %}，但却未能确切地知道如何将所有内容都列出来。下面这个例子没有平铺 - 使用html表可以让我更容易做到

例如：

 {% for item in event.Items %}{% if event.Items|length == 1 %}
    <div style="margin:0 auto; text-align: center; clear: both;"><br />
    <p style="display: block;"><a href="{{ item.ProductURL }}"><img src="{{ item.ImageURL }}" style="width: 200px; margin: 0 auto; display: block;" />
    </a></p>
<p style="letter-spacing:0px; font-family:Noto Sans, Helvetica; font-weight:700; font-size:16px; text-align: center;">{{ item.Name }}</p>
</div>
   {% elif forloop.last and forloop.counter|divisibleby:2 == False %}
   <div style="clear: both;">def <br>
   <a href="{{ item.ProductURL }}"><img src="{{ item.ImageURL }}" style="width: 200px; margin: 0 auto; display: block;" />
<p style="letter-spacing:0px; font-family:Noto Sans, Helvetica; font-weight:700; font-size:16px; text-align: center;">{{ item.Name }}</p>
</div>
{% elif forloop.counter|divisibleby:2 == False %}

<div style="float: left;margin:0 auto; padding-left: 30px;">a
<p><a href="{{ item.ProductURL }}"><img src="{{ item.ImageURL }}" style="width: 200px; margin: 0 auto; display: block;" /></a></p>
<p style="letter-spacing:0px; font-family:Noto Sans, Helvetica; font-weight:700; font-size:16px; text-align: center;">{{ item.Name }}</p>
</div>
{% elif forloop.counter|divisibleby:2 %}
<div style="float:right;margin:0 auto; padding-right: 30px;">b
<p><a href="{{ item.ProductURL }}"><img src="{{ item.ImageURL }}" style="width: 200px; margin: 0 auto; display: block;" /></a></p>
<p style="letter-spacing:0px; font-family:Noto Sans, Helvetica; font-weight:700; font-size:16px; text-align: center;">{{ item.Name }}</p>
</div>
{% endif %} {% endfor %}

PS - 请原谅我的内联样式！

使用django模板语法

0 个答案: