Question

我试图在django模板中显示我的解析结果，但此刻，我所拥有的代码和结果如下，我无法想到其他内容。

我很难在下一行接下来的五个结果。

我的代码

{% for number in numbers %}
  {%if not number|divisibleby:"6" %}
    <span>{{ number }}</span>
  {% else %}
    <div>{{ number }}</div>
    <p></p>
  {% endif %}
{% endfor %}

当前结果

1   2   3   4   5
6
7   8   9   10  11
12
13  14  15  16  17
18
19  20

我的预期结果应与

类似

1   2   3   4   5
6   7   8   9   10
11  12  13  14  15
16  17  18  19  20

Answer 1

这是因为<div>元素。如果您将其替换为<span>并保持<p>不变，则可以：

{% for number in numbers %}
    <span>{{ number }}</span>
  {%if number|divisibleby:"6" %}
    <p></p>
  {% endif %}
{% endfor %}

Working fiddle of rendered html

或者，这就是我要做的，因为我不喜欢那里的<p>元素：

<div>
{% for number in numbers %}
    <span>{{ number }}</span>
  {%if number|divisibleby:"6" %}
    </div><div>
  {% endif %}
{% endfor %}
</div>

Answer 2

你真的需要django吗？ CSS3有:nth-child伪类，可以满足您的需要

<span>1</span>....<span>n</span>

css

span {float:left}
span:nth-child(5n):after {clear:left}

但是如果你真的需要另一种方式试试这个

{%if number|divisibleby:"5" %}
    <span>{{ number }}</span><p></p>
  {% else %}
    <span>{{ number }}</span>
  {% endif %}
{% endfor %}

以这种格式显示号码列表django

2 个答案: