如何使用 css 在 for 循环内的 django 模板中添加样式？

Question

我正在制作一个简单的博客项目，我试图在其中使用 for 循环模板标记注入每个帖子的数据。但是在这样做时，当在博客列表模板上应用 css 时，网格会变得扭曲。然而，当在单独的 Html 页面中手动添加的帖子上进行测试时，此 CSS 工作得很好。如何解决这个问题，因为大多数在普通 Html 页面上运行良好的 css 在与 django 模板结合使用时无法正常运行。这是我的基本博客文章模板：{% extends 'basic_app/base.html' %}{% block content %}<div class="centerstage">    {% for post in post_list %}    <div class="cards">      <div class="card">        <img class="card__image" src="{{ post.blog_pic.url }}" alt="">        <div class="card__content">          <p>            <a href="{% url 'post_detail' pk=post.pk %}">{{ post.title }}</a>          </p>          <p>            {{ post.text|safe|linebreaksbr }}          </p>        </div>        <div class="card__info">          <div>            <i class="material-icons">{{ post.published_date|date:"D M Y"}}</i>310          </div>          <div>            <a href="{% url 'post_detail' pk=post.pk %}" class="card__link">Comments: {{ post.approve_comments.count }}</a>          </div>        </div>      </div>    </div>    {% endfor %}</div>{% endblock %}

Answer 1

您的 for 循环.cards在您的 django 模板中循环，它.cards为 post_list 中的每个帖子创建一个新的。您的 css 运行良好，为.cards您在 html 中拥有的每个创建一个网格，但.card内部只有一个。

由于您.card不在同一个.cards目录中，因此您的 css 网格系统无法正常工作。

把你的<div class="cards">之前（当然之后关闭它）放在你的 for 循环中，它会很好地工作。