怎样实现博客文章卡片的横向并排布局

作者：袖梨 2026-07-10

本文介绍如何使用 CSS Flexbox 将 Django 博客中的文章卡片从默认的垂直堆叠改为响应式横向并排展示，解决 .card 元素逐个换行的问题，并兼顾移动端适配与视觉一致性。

本文介绍如何使用 css flexbox 将 django 博客中的文章卡片从默认的垂直堆叠改为响应式横向并排展示，解决 `.card` 元素逐个换行的问题，并兼顾移动端适配与视觉一致性。

在当前的 post.html 模板中，每个 <div class="card"> 都被包裹在独立的 <div class="card-deck"> 内，且未设置容器级布局规则——这导致浏览器按文档流默认将每个卡片渲染为块级元素，垂直排列。要实现如示意图所示的“多列并排、自动换行”效果，核心在于移除冗余嵌套、统一外层容器，并应用 display: flex + flex-wrap: wrap。

✅ 正确做法：重构 HTML 结构 + 添加 Flex 样式

首先，删除模板中循环内重复的 <head>、<body> 及多余 <div class="card-deck">（这些标签严禁在 <body> 内多次出现，会破坏 HTML 结构合法性并干扰样式）：

{% extends "online_shop/base.html" %}{% load static %}{% block content %}  <!-- ✅ 外层唯一容器：启用 Flex 布局 -->  <div class="blog-grid">    {% for post in posts %}      <div class="post-card">        <img class="card-img-top"              src="{% static 'online_shop/unicorn-cake-14.jpg' %}"              alt="{{ post.title }}"              width="300" height="310">        <div class="card-body">          <h2><a class="article-title" href="#">{{ post.title }}</a></h2>          <p class="card-text">{{ post.content|truncatewords_html:15 }}</p>        </div>        <div class="card-footer">          <small class="text-muted"><a href="#">{{ post.author }}</a></small>          <small class="text-muted" style="margin-left: 5px;">{{ post.date_posted|date:"F d, Y" }}</small>        </div>      </div>    {% endfor %}  </div>{% endblock content %}

然后，在你的 CSS 文件（如 base.css 或 {% static %} 引入的样式表）中添加以下响应式 Flex 规则：

/* 博客卡片容器：水平排列 + 自动换行 */.blog-grid {  display: flex;  flex-wrap: wrap;  justify-content: center; /* 居中对齐整行卡片 */  gap: 24px; /* 卡片间统一间距（推荐替代 margin）*/  padding: 20px;}/* 单张卡片：固定宽度 + 响应式约束 */.post-card {  flex: 0 1 300px; /* 不放大、可缩小、基础宽度 300px */  max-width: 300px;  border-radius: 8px;  box-shadow: 0 4px 12px rgba(0,0,0,0.08);  background: white;  overflow: hidden;}/* 移动端优化：单列显示 */@media (max-width: 768px) {  .blog-grid {    justify-content: flex-start;  }  .post-card {    flex: 0 1 100%;    max-width: 100%;  }}

⚠️ 关键注意事项

禁止在循环内写 <head> / <body>：HTML 规范要求整个页面仅有一个 <head> 和一个 <body>，否则会导致解析异常、SEO 失效及样式错乱。
避免滥用 width + margin 控制布局：用 gap 替代 margin 可更精准控制间距，且不触发外边距合并问题。
flex: 0 1 300px 的含义：flex-grow: 0（不拉伸）、flex-shrink: 1（可压缩）、flex-basis: 300px（基准宽），确保在小屏下能自然换行而非溢出。
图片路径建议动态化：当前硬编码 unicorn-cake-14.jpg 应替换为 {{ post.image.url }}（若模型含 ImageField），提升内容灵活性。