时间戳

首页 > 解决方案 > 检测 HTML Forloop 中的每三个循环 - HTML - Django

python - 检测 HTML Forloop 中的每三个循环 - HTML - Django

问题描述

我有一个网站，在一个页面上有来自用于打印的 for 循环的重复信息。问题是 forloop 中的每个项目大约有 10 行文本。当我去打印时，这 10 行文本有时会在页面之间中断。无论如何，我都需要他们在一起，并且我尝试过“page-break-inside：避免；” 但我无法让它工作。然而，这有点无关紧要，因为我需要确保每个页面上只有三个块，因为 4 已经超出了边距。我的计划是循环遍历块并检测每三个循环并在其下方添加额外的间距以使其进入下一页。

问题：如何检测我的 html forloop 中的每三个循环？

{% for post in filter.qs %}
    {% if forloop.first %}
    <div style="position:relative; top: -12px; left: -2px; margin-bottom: 180px;">
    <div style="position:absolute;left:21.79px;top:435.49px" class="cls_0030"><span class="cls_0030">{%if post.department%}                                       {{post.department}}{%endif%}</span></div>
    <div style="position:absolute;left:248.82px;top:435.54px" class="cls_014"><span class="cls_014">Inspection #</span></div>
    <div style="position:absolute;left:355.58px;top:435.52px" class="cls_013"><span class="cls_013">{{ post.count_building }}</span></div>
    <div style="position:absolute;left:21.70px;top:453.54px" class="cls_014"><span class="cls_014">Inspection Date</span></div>
    <div style="position:absolute;left:96.52px;top:453.52px" class="cls_013"><span class="cls_013">{%if post.date%}{{post.date}}{%endif%}</span></div>
    <div style="position:absolute;left:248.82px;top:453.54px" class="cls_014"><span class="cls_014">Inspection Time</span></div>
    <div style="position:absolute;left:338.10px;top:453.49px" class="cls_008"><span class="cls_008">{%if post.time%}{{post.time}}{%endif%}</span></div>
    <div style="position:absolute;left:21.70px;top:471.54px" class="cls_014"><span class="cls_014">Floor(s)</span></div>
    <div style="position:absolute;left:96.52px;top:471.51px" class="cls_008"><span class="cls_008">{%if post.floor%}{{post.floor}}{%endif%}</span></div>
    <div style="position:absolute;left:21.70px;top:489.55px" class="cls_014"><span class="cls_014">Hazard Level</span></div><div style="position:absolute;          left:84px;top:489.51px" class="cls_009"><span class="cls_009">{%if post.hazard_level%}{{post.hazard_level}}{%endif%}</span></div>
    <div style="position:absolute;left:259.57px;top:489.45px" class="cls_017"><span class="cls_017">Special Hazard Assessment</span></div>
    <div style="position:absolute;left:203.99px;top:491.07px" class="cls_021"><span class="cls_021">Priority</span></div>
    <div style="position:absolute;left:236.97px;top:490.27px" class="cls_020"><span class="cls_020">{%if post.priority%}{{post.priority}}{%endif%}</span></div>
    <div style="position:absolute;left:248.82px;top:501.55px" class="cls_018"><span class="cls_018">Asbestos</span></div><div class="check_asbestos"><div           class="text_pos">Y</div></div>
    <div style="position:absolute;left:321.57px;top:501.55px" class="cls_018"><span class="cls_018">Confined Space</span></div><div class="check_confined"><div     class="text_pos">Y</div></div>
    <div style="position:absolute;left:21.70px;top:507.58px" class="cls_014"><span class="cls_014">Concern</span></div>
    <div style="position:absolute;left:87.54px;top:507.54px" class="cls_009"><span class="cls_009">{%if post.concern%}{{post.concern}}{%endif%}</span></div>
    <div style="position:absolute;left:248.82px;top:513.55px" class="cls_018"><span class="cls_018">Fall Protectio</span></div><div class="check_fall"><div         class="text_pos">Y</div></div>
    <div style="position:absolute;left:321.57px;top:513.55px" class="cls_018"><span class="cls_018">LockOut/Tag/Ou</span></div><div class="check_log"><div          class="text_pos">Y</div></div>
    <div style="position:absolute;left:21.70px;top:525.59px" class="cls_014"><span class="cls_014">Element/Code</span></div>
    <div style="position:absolute;left:87.54px;top:525.54px" class="cls_009"><span class="cls_009">{%if post.codes%}{{post.codes}}{%endif%}</span></div>
    <!--<div style="position:absolute;left:248.82px;top:525.59px" class="cls_014"><span class="cls_014">Code</span></div>
    <div style="position:absolute;left:278.80px;top:525.54px" class="cls_015"><span class="cls_015">105 CMR 410.551</span></div>-->
    <div style="position:absolute;left:21.70px;top:543.60px" class="cls_014"><span class="cls_014">Corrective</span></div><div style="position:absolute;left:87.54px;top:543.69px" class="cls_016"><span class="cls_016"><textarea rows="2" cols="70" style="height: 26px; border: none; resize: none; outline: none; overflow-y: hidden; color:rgb(185,19,24)" type="textarea">{%if post.correction%}{{post.correction}}{%endif%}</textarea></span></div>
    <div style="position:absolute;left:21.70px;top:557.71px" class="cls_014"><span class="cls_014">Action</span></div>
    <div style="position:absolute;left:21.70px;top:576.63px" class="cls_014"><span class="cls_014">Repair Dept.</span></div>
    <div style="position:absolute;left:239.83px;top:576.63px" class="cls_014"><span class="cls_014">WO Number</span></div>
    <div style="position:absolute;left:21.70px;top:594.63px" class="cls_014"><span class="cls_014">WO Complet</span></div>
    <div style="position:absolute;left:171.12px;top:594.63px" class="cls_014"><span class="cls_014">Assigned To:</span></div>
    <div style="position:absolute;left:329.50px;top:594.63px" class="cls_014"><span class="cls_014">Hrs</span></div>
    <!--<div style="position:absolute;left:543.16px;top:756.71px" class="cls_019"><span class="cls_019">Page 1 of 1</span></div>-->
    {%if post.image%}<img class="img-size" src="{{ post.image.url }}"/>{% else %}<div class="filler"></div>{% endif %}
    {% else %}

    <div style="position:relative; left: -2px; margin-bottom: 10px;">
    <div style="position:absolute;left:21.79px;top:435.49px" class="cls_0030"><span class="cls_0030">{%if post.department%}                                       {{post.department}}{%endif%}</span></div>
    <div style="position:absolute;left:248.82px;top:435.54px" class="cls_014"><span class="cls_014">Inspection #</span></div>
    <div style="position:absolute;left:355.58px;top:435.52px" class="cls_013"><span class="cls_013">{{ post.count_building }}</span></div>
    <div style="position:absolute;left:21.70px;top:453.54px" class="cls_014"><span class="cls_014">Inspection Date</span></div>
    <div style="position:absolute;left:96.52px;top:453.52px" class="cls_013"><span class="cls_013">{%if post.date%}{{post.date}}{%endif%}</span></div>
    <div style="position:absolute;left:248.82px;top:453.54px" class="cls_014"><span class="cls_014">Inspection Time</span></div>
    <div style="position:absolute;left:338.10px;top:453.49px" class="cls_008"><span class="cls_008">{%if post.time%}{{post.time}}{%endif%}</span></div>
    <div style="position:absolute;left:21.70px;top:471.54px" class="cls_014"><span class="cls_014">Floor(s)</span></div>
    <div style="position:absolute;left:96.52px;top:471.51px" class="cls_008"><span class="cls_008">{%if post.floor%}{{post.floor}}{%endif%}</span></div>
    <div style="position:absolute;left:21.70px;top:489.55px" class="cls_014"><span class="cls_014">Hazard Level</span></div><div style="position:absolute;          left:84px;top:489.51px" class="cls_009"><span class="cls_009">{%if post.hazard_level%}{{post.hazard_level}}{%endif%}</span></div>
    <div style="position:absolute;left:259.57px;top:489.45px" class="cls_017"><span class="cls_017">Special Hazard Assessment</span></div>
    <div style="position:absolute;left:203.99px;top:491.07px" class="cls_021"><span class="cls_021">Priority</span></div>
    <div style="position:absolute;left:236.97px;top:490.27px" class="cls_020"><span class="cls_020">{%if post.priority%}{{post.priority}}{%endif%}</span></div>
    <div style="position:absolute;left:248.82px;top:501.55px" class="cls_018"><span class="cls_018">Asbestos</span></div><div class="check_asbestos"><div           class="text_pos">Y</div></div>
    <div style="position:absolute;left:321.57px;top:501.55px" class="cls_018"><span class="cls_018">Confined Space</span></div><div class="check_confined"><div     class="text_pos">Y</div></div>
    <div style="position:absolute;left:21.70px;top:507.58px" class="cls_014"><span class="cls_014">Concern</span></div>
    <div style="position:absolute;left:87.54px;top:507.54px" class="cls_009"><span class="cls_009">{%if post.concern%}{{post.concern}}{%endif%}</span></div>
    <div style="position:absolute;left:248.82px;top:513.55px" class="cls_018"><span class="cls_018">Fall Protectio</span></div><div class="check_fall"><div         class="text_pos">Y</div></div>
    <div style="position:absolute;left:321.57px;top:513.55px" class="cls_018"><span class="cls_018">LockOut/Tag/Ou</span></div><div class="check_log"><div          class="text_pos">Y</div></div>
    <div style="position:absolute;left:21.70px;top:525.59px" class="cls_014"><span class="cls_014">Element/Code</span></div>
    <div style="position:absolute;left:87.54px;top:525.54px" class="cls_009"><span class="cls_009">{%if post.codes%}{{post.codes}}{%endif%}</span></div>
    <!--<div style="position:absolute;left:248.82px;top:525.59px" class="cls_014"><span class="cls_014">Code</span></div>
    <div style="position:absolute;left:278.80px;top:525.54px" class="cls_015"><span class="cls_015">105 CMR 410.551</span></div>-->
    <div style="position:absolute;left:21.70px;top:543.60px" class="cls_014"><span class="cls_014">Corrective</span></div><div style="position:absolute;left:87.54px;top:543.69px" class="cls_016"><span class="cls_016"><textarea rows="2" cols="70" style="height: 27px; border: none; resize: none; outline: none; overflow-y: hidden; color:rgb(185,19,24)" type="textarea">{%if post.correction%}{{post.correction}}{%endif%}</textarea></span></div>
    <div style="position:absolute;left:21.70px;top:557.71px" class="cls_014"><span class="cls_014">Action</span></div>
    <div style="position:absolute;left:21.70px;top:576.63px" class="cls_014"><span class="cls_014">Repair Dept.</span></div>
    <div style="position:absolute;left:239.83px;top:576.63px" class="cls_014"><span class="cls_014">WO Number</span></div>
    <div style="position:absolute;left:21.70px;top:594.63px" class="cls_014"><span class="cls_014">WO Complet</span></div>
    <div style="position:absolute;left:171.12px;top:594.63px" class="cls_014"><span class="cls_014">Assigned To:</span></div>
    <div style="position:absolute;left:329.50px;top:594.63px" class="cls_014"><span class="cls_014">Hrs</span></div>
    <!--<div style="position:absolute;left:543.16px;top:756.71px" class="cls_019"><span class="cls_019">Page 1 of 1</span></div>-->
    {%if post.image%}<img class="img-size" src="{{ post.image.url }}"/>{% else %}<div class="filler"></div>{% endif %}
    {% endif %}
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </div>
{% endfor %}

标签： pythonhtmldjangofor-loopdetection

解决方案

您可以使用divisibleby模板过滤器forloop.counter来检测每三个循环

{% for post in filter.qs %}
    {% if forloop.counter|divisibleby:"3" %}
        Something every third loop
    {% endif %}
{% endfor

推荐阅读