项目列表错位主因是父容器未设flex或grid布局，应加display: flex、flex-wrap: wrap和gap；width与min-width混用致响应失效，推荐flex: 1 1 280px配合max-width和媒体查询；卡片高度不一需固定容器高并用Object-fit和多行省略统一视觉。
项目列表容器没设 display: flex 或 display: grid 导致子项堆叠错位
多数混乱源于默认的 display: block 行为：每个
独占一行，又没控制宽度/浮动，视觉上就挤成一团或断行异常。
直接给列表父容器加弹性布局最稳妥：
.project-list { display: flex; flex-wrap: wrap; gap: 16px; }
注意三点：
• flex-wrap: wrap 允许换行，避免溢出容器
• gap 替代 margin 控制间距，不触发外边距合并问题
• 子项无需再设 Float 或 inline-block，否则会干扰 flex 计算
width 和 min-width 混用导致响应断点失效
写死 width: 300px 在小屏下必然撑破容器；全用 min-width: 280px 又可能在大屏留白过多。得按设备区间分层约束。
立即学习“前端免费学习笔记（深入）”；
推荐组合写法：
.project-item { flex: 1 1 280px; /* 基础宽度 280px，可伸缩 */ max-width: 400px; } @media (max-width: 768px) { .project-item { flex-basis: 100%; / 小屏单列 / } }
关键点：
• flex: 1 1 280px 比单纯 width 更适应容器变化
• max-width 防止单项过宽破坏网格节奏
• 媒体查询中改 flex-basis，比重写 width 更可靠
图片和文字高度不一致造成基线错位
项目卡片里有图有标题有描述，但图片加载慢、文字行数不同、字体渲染差异，都会让卡片底部参差不齐——看着像“排版乱”，其实是高度没对齐。
统一高度 + 对齐方式是解法：
.project-item { display: flex; flex-direction: column; height: 240px; } .project-item img { height: 120px; object-fit: cover; }
.project-item .title { margin: 8px 0 4px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
说明：
• 容器设固定 height，内部用 flex-direction: column 垂直排列
• 图片用 object-fit: cover 保比例裁剪，避免拉伸变形
• 标题用多行省略，防止文字撑高破坏整体节奏
伪元素或空标签意外撑开空白
调试时发现某处莫名多出 8px 空隙？大概率是 ::before/::after 默认生成了内容，或是