一、写在前面图文并排布局适用场景日常做网页、素材展示、游戏道具图鉴、商品清单、藏品相册都会用到多张图文卡片横向并排、自动换行的布局。 过去老式方案用浮动 float需要清除浮动、极易出现排版错乱今天分享一套Flex 弹性布局实现的稳定图文并排方案无需任何 JS、第三方框架纯静态代码零基础复制即用。 本次案例以三角洲高价值回收物资为展示素材一行 4 张图文卡片统一图片 名称 价格三层结构排版规整、视觉干净下面从效果、原理、代码逐段拆解讲解。二、成品页面整体效果预览页面整体浅蓝底色顶部居中大标题所有图文卡片整体居中页面宽度固定 1200px不会无限拉伸并排规则同一行横向摆放 4 张图文卡片卡片之间均匀留白 15px卡片数量超过 4 张时自动换行第二行继续 4 列排布单张图文卡片内部结构从上至下统一 160×160 图片框图片等比例完整展示不变形背景浅灰填充留白区域道具名称文字固定两行高度文字过多自动截断隐藏不会撑开卡片打乱排版红色加粗醒目价格快速区分道具价值高低视觉细节卡片白色底色 圆角区分区块柔和不刺眼整体统一规范。本次展示图文素材清单按价值降序海洋之泪2448.25 万非洲之心1248.42 万复苏呼吸机606.51 万ECMO237.33 万纵横221.66 万万金泪冠219.65 万坦克模型214.21 万曼德尔超算202.90 万三、图文并排核心技术原理逐行拆解关键 CSS整套布局核心依靠Flex 弹性盒 calc 百分比计算 object-fit 图片适配三大技术实现稳定多列图文并排每段代码作用详细说明1. 全局通用重置样式* 选择器css*{ margin:0; padding:0; box-sizing:border-box; font-family:Microsoft YaHei,sans-serif; }margin:0;padding:0清除浏览器自带默认内外边距避免不同浏览器排版差异box-sizing:border-box图文并排关键属性元素宽高会包含内边距 padding、边框 border不会出现卡片宽度溢出、挤掉下一行的 bug统一字体全页面微软雅黑避免系统默认字体错乱。2. 外层卡片容器.goods-box实现横向并排 自动换行css.goods-box{ width: 1200px; margin: 0 auto; list-style: none; display: flex; flex-wrap: wrap; gap: 15px; }display: flex开启弹性布局容器内所有子 li 卡片默认横向并排实现图文并排基础flex-wrap: wrap换行开关一行放不下 4 张卡片时自动换到下一行无此属性卡片会全部挤在同一行压缩变形gap: 15px统一设置卡片横向、纵向间距替代老式 margin不会出现两端多余空白排版更整洁width:1200px;margin:0 auto限制整体宽度并居中不会铺满整个浏览器窗口list-style:none清除 ul 列表自带小黑点。3. 单张图文卡片.goods-item精准控制 4 列等分宽度css.goods-item{ width: calc(25% - 12px); background: #fff; border-radius: 6px; padding: 15px; text-align: center; }重点讲解calc(25% - 12px)4 列等分计算公式25%一行 4 张卡片每张理论占容器总宽度 1/4减去 12px容器 gap 卡片间距 15px4 张卡片中间存在 3 个间隙单张卡片分摊间隙宽度15*3/4≈12px作用完美均分 4 列卡片之间间隙均匀不会出现最后一列卡片挤到下一行的排版崩坏问题 其余样式白色卡片底色、圆角柔和、内部 15px 内边距、所有图文居中对齐。4. 图片适配样式解决图文并排最常见痛点 —— 图片拉伸变形css.goods-item img{ width:160px; height:160px; object-fit:contain; background:#f9f9f9; border-radius:4px; }固定宽高 160px统一所有图片展示尺寸保证所有图文卡片高度一致object-fit:contain图文展示必备属性图片按原始比例缩放完整显示全部内容不会拉伸扭曲图片比例和方框不匹配时会在上下 / 左右留白浅灰色背景填充留白区域视觉统一对比默认 fill 会强行拉伸图片cover 会裁切图片展示道具图鉴优先使用 contain。5. 文字防溢出样式保证所有图文卡片高度统一css.goods-name{ font-size: 14px; color: #333; margin: 10px 0; height: 40px; line-height:20px; overflow:hidden; text-align:center; }固定高度 40px、行高 20px强制名称最多显示两行文字overflow:hidden文字超过两行直接隐藏不会拉长卡片破坏并排整齐度 价格模块单独设置红色加粗突出重点数据区分图文层级。四、完整可运行源码复制保存 html 文件直接打开html预览!DOCTYPE html html head meta charsetutf-8 title商品列表/title style typetext/css *{ margin:0; padding:0; box-sizing:border-box; font-family:Microsoft YaHei,sans-serif; } body{ background-color: aliceblue; padding: 30px; } .title{ text-align: center; font-size: 24px; margin-bottom: 20px; color: #333; } .goods-box{ width: 1200px; margin: 0 auto; list-style: none; display: flex; flex-wrap: wrap; gap: 15px; } .goods-item{ width: calc(25% - 12px); background: #fff; border-radius: 6px; padding: 15px; text-align: center; } .goods-item img{ width:160px; height:160px; object-fit:contain; background:#f9f9f9; border-radius:4px; } .goods-name{ font-size: 14px; color: #333; margin: 10px 0; height: 40px; line-height:20px; overflow:hidden; text-align:center; } .goods-price{ font-size:18px; color:#e2231a; font-weight:bold; text-align:center; } /style /head body h2 classtitle三角洲回收物/h2 ul classgoods-box li classgoods-item img src img/Screenshot_2026-03-31-13-14-51-065_com.ss.android.ugc.aweme_1774934214372edit.jpg div classgoods-name海洋之泪/div div classgoods-price2448.25万/div /li li classgoods-item img src img/Screenshot_2026-03-31-13-14-48-676_com.ss.android.ugc.aweme_1774934224767edit.jpg div classgoods-name非洲之心/div div classgoods-price1248.42万/div /li li classgoods-item img src img/Screenshot_2026-03-31-13-14-59-093_com.ss.android.ugc.aweme_1774934180519edit.jpg div classgoods-name复苏呼吸机/div div classgoods-price606.51万/div /li li classgoods-item img src img/Screenshot_2026-03-31-13-15-11-088_com.ss.android.ugc.aweme_1774934134717edit.jpg div classgoods-nameECMO/div div classgoods-price237.33万/div /li li classgoods-item img src img/Screenshot_2026-03-31-13-14-53-693_com.ss.android.ugc.aweme_1774934202803edit.jpg div classgoods-name纵横/div div classgoods-price221.66万/div /li li classgoods-item img src img/Screenshot_2026-03-31-13-14-56-519_com.ss.android.ugc.aweme_1774934192052edit.jpg div classgoods-name万金泪冠/div div classgoods-price219.65万/div /li li classgoods-item img src img/Screenshot_2026-03-31-13-15-05-155_com.ss.android.ugc.aweme_1774934158545edit.jpg div classgoods-name坦克模型/div div classgoods-price214.21万/div /li li classgoods-item img src img/Screenshot_2026-03-31-13-15-07-541_com.ss.android.ugc.aweme_1774934145534edit.jpg div classgoods-name曼德尔超算/div div classgoods-price202.90万/div /li /ul /body /html五、自定义修改教程图文并排灵活调整1. 增减图文卡片复制 / 删除完整li classgoods-item.../li整块代码新增素材直接复制模板布局自动适配无需修改样式。2. 修改并排列数核心修改 calc 宽度3 列并排.goods-item宽度改为calc(33.3% - 10px)2 列并排.goods-item宽度改为calc(50% - 8px)1 列单列图文.goods-item宽度改为100%3. 图片相关调整修改图片尺寸调整 img 内 width、height 数值图片铺满裁切把object-fit:contain替换为object-fit:cover更换图片修改 img 标签内 src 路径本地图片放入 img 文件夹对应路径即可。4. 配色与页面美化页面背景修改 body 内background-color色值卡片底色修改.goods-item的 background价格颜色修改.goods-price内 color可自定义蓝色、黑色等。5. 卡片间距调整修改.goods-box内gap数值数值越大卡片间隙越宽。六、方案优势总结对比老式图文布局兼容性强所有现代浏览器完美支持无浮动清除、排版错乱问题拓展性高无限新增图文卡片自动换行列数一键切换图片处理完善统一尺寸 等比例显示彻底解决图文排版图片变形轻量化纯 HTML 内嵌 CSS无外部依赖本地保存即可打开适合做素材图鉴、博客展示页面结构清晰图文分层规范文字防溢出所有卡片高度统一视觉整齐。七、结尾这套 Flex 图文并排卡片布局是前端最通用的素材展示方案不管是游戏道具、商品、摄影图集、藏品清单都能直接套用。代码注释清晰、修改门槛极低新手可以按照上文分段讲解逐行理解布局逻辑也可以直接复制源码修改素材快速产出图文展示页面。 如果需要适配手机端、增加 hover 悬浮效果、价格排序功能都可以在此基础上二次拓展。
