项目列表错位主因是父容器未设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 行为：每个 <li> 或 <div class="item"> 独占一行，又没控制宽度/浮动，视觉上就挤成一团或断行异常。
直接给列表父容器加弹性布局最稳妥：
.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;
}
<p>@media (max-width: 768px) {
.project-item {
flex-basis: 100%; /<em> 小屏单列 </em>/
}
}关键点：
• flex: 1 1 280px 比单纯 width 更适应容器变化
• max-width 防止单项过宽破坏网格节奏
• 媒体查询中改 flex-basis，比重写 width 更可靠
图片和文字高度不一致造成基线错位
项目卡片里有图有标题有描述，但图片加载慢、文字行数不同、字体渲染差异，都会让卡片底部参差不齐——看着像“排版乱”，其实是高度没对齐。
统一高度 + 对齐方式是解法：
.project-item {
display: flex;
flex-direction: column;
height: 240px;
}
<p>.project-item img {
height: 120px;
object-fit: cover;
}</p><p>.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 默认生成了内容，或是 <br>、空 <div> 没删干净。
快速排查步骤：
- 打开浏览器开发者工具，选中空白区域，看是否高亮到某个伪元素
- 检查 HTML 是否残留未关闭的标签（如
<p>没闭合） - 临时加
* { outline: 1px solid red; }查看真实边界 - 对可疑伪元素显式设
content: ""或display: none
常见陷阱：ul 默认有 padding-left，li 有上下 margin，清样式别只清 margin: 0，漏掉 padding 和 list-style 就还会偏移。
