HTML双栏布局如何制作卡片列表？模块化搭建步骤-html教程-PHP中文网

双栏卡片列表需兼顾结构语义、响应式断点与视觉对齐：HTML用包裹卡片组、每张卡用，图片带alt和宽高；CSS用grid-template-columns: repeat(2, minmax(280px, 1fr)))配合gap；移动端降为单列；标题截断、图片块级化、按钮块级居中；焦点与悬停样式同步，确保可访问性。

html双栏布局如何制作卡片列表？模块化搭建步骤

双栏卡片列表不是“把卡片塞进两列”就完事，关键在结构语义、响应式断点和视觉对齐三者咬合。用 display: flex 或 display: grid 都能实现，但选错会导致小屏错位、焦点顺序混乱、图片加载偏移（CLS）等问题。

HTML结构必须区分语义层级：用 `<section></section>` 包卡片组，每张卡用 `<article></article>`

很多人直接套 <div class="card">，结果屏幕阅读器读不出内容类型，SEO 也弱。正确做法是： <ul> <li> <code><section></section> 包整个卡片区域，表示“逻辑分组”，比如“推荐商品”或“最新文章”

每张卡用 <article></article>，表示“可独立分发的内容单元”，自带语义权重和默认 tab 顺序

卡片内图片必须带 alt 和显式 width/height 属性，否则加载时会触发 CLS

别在 <article></article> 外再套一层

<div>——多余 wrapper 会干扰 Grid/Flex 的子项计算


<h3>CSS用 <code>grid-template-columns: repeat(2, 1fr)

实现双栏，但必须加 gap 和 minmax()

写死 width: 50% 或 flex: 0 0 50% 看似简单，实际在窄屏下会撑破容器、文字换行失控。稳妥方案是 Grid：

父容器设 display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 1rem;
minmax(280px, 1fr) 保证单卡最小宽度，超出后均分剩余空间，比纯 1fr 更抗挤压
gap 必须设在容器上，别用 margin 模拟——后者在打印样式、暗色模式下易错位
移动端强制单列：加媒体查询 @media (max-width: 767px) { grid-template-columns: 1fr; }

卡片内部排版要防文字溢出和图片塌陷

标题过长、描述换行不一致、图片底部留白，是双栏卡片最常“破相”的地方：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

立即学习“前端免费学习笔记（深入）”；

标题截断用 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，比 line-clamp 兼容性更稳
图片加 display: block; width: 100%; height: auto;，消除 <img alt="HTML双栏布局如何制作卡片列表？模块化搭建步骤" > 默认的 inline 基线间隙
按钮统一用 display: block; width: 100%; margin-top: 0.75rem;，避免贴着文字底边
别给 <article></article> 设固定 height——用 padding 控制呼吸感，留出触控余量

悬停与键盘焦点必须同步处理，否则残障用户无法操作

只写 :hover { transform: translateY(-2px); } 是无效的。真机或键盘导航时根本没反馈：

卡片容器加 tabindex="0"，确保整块可聚焦（<article></article> 默认不可聚焦）
:focus 样式必须和 :hover 完全一致，包括 outline 或 box-shadow
按钮若只包了图标没包文字，需加 aria-label；若用了伪元素做图标，得设 aria-hidden="true"
验证方法：关掉鼠标，纯用 Tab 键走一遍，看焦点是否连续、视觉反馈是否清晰、顺序是否符合 DOM 流

双栏卡片最难的不是布局本身，而是语义链（<section></section> → <article></article> → <img alt>）和交互链（tabindex → :focus → aria）的对齐。漏掉任意一环，视觉上可能看不出问题，但可访问性和长期维护成本会指数级上升。