使用 css flexbox 将 django 博客中的每篇帖子渲染为并排显示的响应式卡片，替代默认的垂直堆叠布局，提升页面美观性与可读性。
使用 css flexbox 将 django 博客中的每篇帖子渲染为并排显示的响应式卡片，替代默认的垂直堆叠布局，提升页面美观性与可读性。
要让博客文章卡片（如 <div class="card">）水平并排显示而非默认的上下堆叠，核心在于脱离文档流中的块级默认行为，改用现代 CSS 布局方案——display: flex。你当前模板中每个 card 都被包裹在独立的 card-deck 容器内，且未设置父容器的布局方式，导致浏览器按标准文档流逐个垂直渲染，这是问题根源。
✅ 正确做法：统一父容器 + Flex 布局
首先，移除循环内重复的 <head> 和 <body> 标签（HTML 结构错误：模板已继承 base.html，不应在 {% for %} 内嵌套 HTML 根元素），并将所有卡片统一包裹在一个具备 Flex 属性的外层容器中：
{% extends "online_shop/base.html" %}
{% load static %}
{% block content %}
<!-- ✅ 正确：单个 flex 容器包裹全部卡片 -->
<div class="blog-grid" style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; padding: 20px;">
{% for post in posts %}
<div class="card" style="
width: 300px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
overflow: hidden;
transition: transform 0.2s ease;
">
<img
src="{% static 'online_shop/unicorn-cake-14.jpg' %}"
alt="{{ post.title }}"
style="width: 100%; height: 200px; object-fit: cover;"
>
<div class="card-body" style="padding: 16px;">
<h3 style="margin: 0 0 8px 0;"><a href="#" class="article-title">{{ post.title }}</a></h3>
<p style="font-size: 0.95rem; color: #555; margin-bottom: 12px;">
{{ post.content|truncatewords_html:15 }}
</p>
<div class="card-footer" style="display: flex; justify-content: space-between; font-size: 0.85rem; color: #777;">
<span><a href="#">{{ post.author }}</a></span>
<span>{{ post.date_posted|date:"M d, Y" }}</span>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}? 关键 CSS 解析（推荐提取至静态 CSS 文件）
/* 推荐放入 static/css/blog.css 并在 base.html 中引入 */
.blog-grid {
display: flex;
flex-wrap: wrap; /* 允许换行，适配小屏幕 */
justify-content: center; /* 水平居中对齐 */
gap: 20px; /* 卡片间距（比 margin 更可靠） */
padding: 20px;
}
/* 响应式优化：平板及以下宽度改为每行最多 2 张 */
@media (max-width: 768px) {
.blog-grid {
justify-content: flex-start;
}
.card {
width: calc(50% - 10px); /* 2 列，含 gap 补偿 */
}
}
/* 手机端：单列显示 */
@media (max-width: 480px) {
.card {
width: 100%;
}
}⚠️ 注意事项
- 禁止在循环内写 <head> / <body>：Django 模板继承机制下，这些标签仅应在 base.html 中定义一次，否则将导致 HTML 结构非法、样式失效或 SEO 问题。
- 避免内联样式过度使用：生产环境建议将样式抽离为 .blog-grid 和 .card 类，便于复用与维护。
- 图片路径需动态化：示例中硬编码了静态图路径，实际应使用 {{ post.image.url }}（若模型含 ImageField）或根据业务逻辑动态选择。
- 语义化增强：可为卡片添加 role="article" 及 aria-labelledby 提升无障碍访问支持。
通过以上调整，你的博客页面将实现整洁、响应式的多列卡片布局——PC 端自动并排，移动端优雅回退为单列，兼顾美观性与用户体验。
