Code Combat | 极客战记 攻略【Kithgard地牢篇 14/42】祸之火焰
2026/7/4 4:01:15
一、写在前面：图文并排布局适用场景
日常做网页、素材展示、游戏道具图鉴、商品清单、藏品相册，都会用到多张图文卡片横向并排、自动换行的布局。 过去老式方案用浮动 float，需要清除浮动、极易出现排版错乱；今天分享一套Flex 弹性布局实现的稳定图文并排方案，无需任何 JS、第三方框架，纯静态代码，零基础复制即用。 本次案例以三角洲高价值回收物资为展示素材，一行 4 张图文卡片，统一图片 + 名称 + 价格三层结构，排版规整、视觉干净，下面从效果、原理、代码逐段拆解讲解。
二、成品页面整体效果预览
- 页面整体：浅蓝底色，顶部居中大标题，所有图文卡片整体居中，页面宽度固定 1200px，不会无限拉伸；
- 并排规则：同一行横向摆放 4 张图文卡片，卡片之间均匀留白 15px；卡片数量超过 4 张时自动换行，第二行继续 4 列排布；
- 单张图文卡片内部结构（从上至下）：
- 统一 160×160 图片框，图片等比例完整展示不变形，背景浅灰填充留白区域；
- 道具名称文字，固定两行高度，文字过多自动截断隐藏，不会撑开卡片打乱排版；
- 红色加粗醒目价格，快速区分道具价值高低；
- 视觉细节：卡片白色底色 + 圆角，区分区块，柔和不刺眼，整体统一规范。
本次展示图文素材清单（按价值降序）
- 海洋之泪｜2448.25 万
- 非洲之心｜1248.42 万
- 复苏呼吸机｜606.51 万
- ECMO｜237.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 卡片间距 15px，4 张卡片中间存在 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 charset="utf-8"> <title>商品列表</title> <style type="text/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 class="title">三角洲回收物</h2> <ul class="goods-box"> <li class="goods-item"> <img src ="img/Screenshot_2026-03-31-13-14-51-065_com.ss.android.ugc.aweme_1774934214372edit.jpg"> <div class="goods-name">海洋之泪</div> <div class="goods-price">2448.25万</div> </li> <li class="goods-item"> <img src ="img/Screenshot_2026-03-31-13-14-48-676_com.ss.android.ugc.aweme_1774934224767edit.jpg"> <div class="goods-name">非洲之心</div> <div class="goods-price">1248.42万</div> </li> <li class="goods-item"> <img src ="img/Screenshot_2026-03-31-13-14-59-093_com.ss.android.ugc.aweme_1774934180519edit.jpg"> <div class="goods-name">复苏呼吸机</div> <div class="goods-price">606.51万</div> </li> <li class="goods-item"> <img src ="img/Screenshot_2026-03-31-13-15-11-088_com.ss.android.ugc.aweme_1774934134717edit.jpg"> <div class="goods-name">ECMO</div> <div class="goods-price">237.33万</div> </li> <li class="goods-item"> <img src ="img/Screenshot_2026-03-31-13-14-53-693_com.ss.android.ugc.aweme_1774934202803edit.jpg"> <div class="goods-name">纵横</div> <div class="goods-price">221.66万</div> </li> <li class="goods-item"> <img src ="img/Screenshot_2026-03-31-13-14-56-519_com.ss.android.ugc.aweme_1774934192052edit.jpg"> <div class="goods-name">万金泪冠</div> <div class="goods-price">219.65万</div> </li> <li class="goods-item"> <img src ="img/Screenshot_2026-03-31-13-15-05-155_com.ss.android.ugc.aweme_1774934158545edit.jpg"> <div class="goods-name">坦克模型</div> <div class="goods-price">214.21万</div> </li> <li class="goods-item"> <img src ="img/Screenshot_2026-03-31-13-15-07-541_com.ss.android.ugc.aweme_1774934145534edit.jpg"> <div class="goods-name">曼德尔超算</div> <div class="goods-price">202.90万</div> </li> </ul> </body> </html>五、自定义修改教程（图文并排灵活调整）
1. 增减图文卡片
复制 / 删除完整<li class="goods-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 悬浮效果、价格排序功能，都可以在此基础上二次拓展。