【发布时间】：2020-09-29 09:22:10
【问题描述】：
我正在制作一个简单的博客项目，我正在尝试使用 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 %}
可以很好地手动添加帖子的 HTML 代码：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="cards_style.css">
<title>Blog</title>
</head>
<body>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="cards">
<div class="card">
<img class="card__image" src="https://fakeimg.pl/400x300/009578/fff/" alt="">
<div class="card__content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos ducimus id ab tenetur delectus reiciendis fugit autem qui at.
</p>
<p>
Alias itaque praesentium eum, pariatur consequatur ducimus asperiores accusantium velit minima?
</p>
</div>
<div class="card__info">
<div>
<i class="material-icons">thumb_up</i>310
</div>
<div>
<a href="./" class="card__link">View Article</a>
</div>
</div>
</div>
<div class="card">
<img class="card__image" src="https://fakeimg.pl/400x300/252c6a/fff/" alt="">
<div class="card__content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos ducimus id ab tenetur delectus reiciendis fugit autem qui at.
</p>
<p>
Alias itaque praesentium eum, pariatur consequatur ducimus asperiores accusantium velit minima?
</p>
</div>
<div class="card__info">
<div>
<i class="material-icons">thumb_up</i>1,993
</div>
<div>
<a href="./" class="card__link">View Article</a>
</div>
</div>
</div>
<div class="card">
<img class="card__image" src="https://fakeimg.pl/400x300/f1db26/000/" alt="">
<div class="card__content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos ducimus id ab tenetur delectus reiciendis fugit autem qui at.
</p>
<p>
Alias itaque praesentium eum, pariatur consequatur ducimus asperiores accusantium velit minima?
</p>
</div>
<div class="card__info">
<div>
<i class="material-icons">thumb_up</i>887
</div>
<div>
<a href="./" class="card__link">View Article</a>
</div>
</div>
</div>
<div class="card">
<img class="card__image" src="https://fakeimg.pl/400x300/252c6a/fff/" alt="">
<div class="card__content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos ducimus id ab tenetur delectus reiciendis fugit autem qui at.
</p>
<p>
Alias itaque praesentium eum, pariatur consequatur ducimus asperiores accusantium velit minima?
</p>
</div>
<div class="card__info">
<div>
<i class="material-icons">thumb_up</i>2,512
</div>
<div>
<a href="./" class="card__link">View Article</a>
</div>
</div>
</div>
<div class="card">
<img class="card__image" src="https://fakeimg.pl/400x300/009578/fff/" alt="">
<div class="card__content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos ducimus id ab tenetur delectus reiciendis fugit autem qui at.
</p>
<p>
Alias itaque praesentium eum, pariatur consequatur ducimus asperiores accusantium velit minima?
</p>
</div>
<div class="card__info">
<div>
<i class="material-icons">thumb_up</i>140
</div>
<div>
<a href="./" class="card__link">View Article</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS：
.cards {
margin: 0 auto;
max-width: 1000px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
grid-auto-rows: auto;
gap: 20px;
font-family: sans-serif;
padding-top: 30px;
}
.cards * {
box-sizing: border-box;
}
.card__image {
width: 100%;
height: 150px;
object-fit: cover;
display: block;
border-top: 2px solid #333333;
border-right: 2px solid #333333;
border-left: 2px solid #333333;
}
.card__content {
line-height: 1.5;
font-size: 0.9em;
padding: 15px;
background: #fafafa;
border-right: 2px solid #333333;
border-left: 2px solid #333333;
}
.card__content > p:first-of-type {
margin-top: 0;
}
.card__content > p:last-of-type {
margin-bottom: 0;
}
.card__info {
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
color: #555555;
background: #eeeeee;
font-size: 0.8em;
border-bottom: 2px solid #333333;
border-right: 2px solid #333333;
border-left: 2px solid #333333;
}
.card__info i {
font-size: 0.9em;
margin-right: 8px;
}
.card__link {
color: #64968c;
text-decoration: none;
}
.card__link:hover {
text-decoration: underline;
}
我是Django的新手，所以请提供一些解决这个问题的方法。
【问题讨论】：
标签： python html css django django-templates