我正在制作一個簡單的博客項目,我試圖在其中使用 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 %}
1 回答

慕尼黑5688855
TA貢獻1848條經驗 獲得超2個贊
您的 for 循環.cards
在您的 django 模板中循環,它.cards
為 post_list 中的每個帖子創建一個新的。您的 css 運行良好,為.cards
您在 html 中擁有的每個創建一個網格,但.card
內部只有一個。
由于您.card
不在同一個.cards
目錄中,因此您的 css 網格系統無法正常工作。
把你的<div class="cards">
之前(當然之后關閉它)放在你的 for 循環中,它會很好地工作。
添加回答
舉報
0/150
提交
取消