Django模板(index.html)中两列布局循环如何正确编写？

看起来你现在的问题根源很明确：你在{% for %}循环里，每遍历一个dest就重复输出了两个完全一样的div，而且都用了同一个dest.img，这自然会导致图片重复显示，完全没达到复用代码的目的。

我给你两种针对性的解决方案，根据你的实际布局需求选：

方案1：自动两列布局（推荐） #

如果你的需求是让所有dest项自动排成两列，不需要手动分组，那只需要在循环里生成单个div，然后用CSS的Grid或Flex来实现两列布局，既避免重复代码，又不会重复渲染图片：

{% static 'images/fulls' as baseUrl %} 
{% static 'images/thumbs' as hiUrl %} 
<section class="thumbnails">
  {% for dest in dests %}
    <div>
      <a href="{{baseUrl}}/{{dest.img}}">
        <img src="{{hiUrl}}/{{dest.img}}" alt="{{dest.title}}" /> <!-- 建议用dest的标题做alt，更符合语义化 -->
        <h3>{{dest.title}}</h3> <!-- 替换固定文本为dest的动态标题，更合理 -->
      </a>
    </div>
  {% endfor %}
</section>

然后在你的CSS文件里添加布局样式（别写在inline里，维护性差）：

.thumbnails {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列等宽 */
  gap: 1.5rem; /* 列之间的间距 */
}

方案2：手动分组每行两列 #

如果你的需求是严格每行显示两个dest项，那可以利用Django模板的循环计数器来分组，避免重复代码的同时保证布局结构：

{% static 'images/fulls' as baseUrl %} 
{% static 'images/thumbs' as hiUrl %} 
<section class="thumbnails">
  {% for dest in dests %}
    <!-- 每两个项开始新的一行 -->
    {% if forloop.counter0|divisibleby:2 %}
      <div class="row">
    {% endif %}
        <div class="col">
          <a href="{{baseUrl}}/{{dest.img}}">
            <img src="{{hiUrl}}/{{dest.img}}" alt="{{dest.title}}" />
            <h3>{{dest.title}}</h3>
          </a>
        </div>
    <!-- 每两个项结束行，或者循环到最后一个项时闭合行 -->
    {% if forloop.counter|divisibleby:2 or forloop.last %}
      </div>
    {% endif %}
  {% endfor %}
</section>

对应的CSS样式：

.thumbnails .row {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.thumbnails .col {
  flex: 1; /* 两列等宽 */
}

关键提醒 #

你原来的代码里把两个完全相同的div塞进循环里，等于每个dest都被渲染了两次，这就是图片重复的核心原因。我们的思路是让每个dest只被渲染一次，用CSS布局实现两列效果，或者用循环计数器分组，这样既解决了重复代码问题，也不会出现图片重复的情况。

内容的提问来源于stack exchange，提问作者Dania