如何让博客文章卡片水平排列显示（Flex 布局实现响应式网格）-html教程-PHP中文网

使用 css flexbox 将 django 博客中的每篇帖子渲染为并排显示的响应式卡片，替代默认的垂直堆叠布局，提升页面美观性与可读性。

使用 css flexbox 将 django 博客中的每篇帖子渲染为并排显示的响应式卡片，替代默认的垂直堆叠布局，提升页面美观性与可读性。

要让博客文章卡片（如

）水平并排显示而非默认的上下堆叠，核心在于脱离文档流中的块级默认行为，改用现代 CSS 布局方案——display: flex。你当前模板中每个 card 都被包裹在独立的 card-deck 容器内，且未设置父容器的布局方式，导致浏览器按标准文档流逐个垂直渲染，这是问题根源。

✅ 正确做法：统一父容器 + Flex 布局

首先，移除循环内重复的和标签（HTML 结构错误：模板已继承 base.html，不应在 {% for %} 内嵌套 HTML 根元素），并将所有卡片统一包裹在一个具备 Flex 属性的外层容器中：

Django

避免常见的 Django 错误——QuerySet 评估、N+1 查询、迁移冲突和 ORM 陷阱。

下载

{% 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;
      ">
        @@##@@
        <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%;
  }
}

⚠️ 注意事项

禁止在循环内写 / ：Django 模板继承机制下，这些标签仅应在 base.html 中定义一次，否则将导致 HTML 结构非法、样式失效或 SEO 问题。
避免内联样式过度使用：生产环境建议将样式抽离为 .blog-grid 和 .card 类，便于复用与维护。
图片路径需动态化：示例中硬编码了静态图路径，实际应使用 {{ post.image.url }}（若模型含 ImageField）或根据业务逻辑动态选择。
语义化增强：可为卡片添加 role="article" 及 aria-labelledby 提升无障碍访问支持。

通过以上调整，你的博客页面将实现整洁、响应式的多列卡片布局——PC 端自动并排，移动端优雅回退为单列，兼顾美观性与用户体验。