CSS项目列表排版问题解决方法

直接给列表父容器加弹性布局最稳妥：

.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 默认生成了内容，或是
、空

京东外卖新人红包怎么领？

上一篇

京东外卖新人红包怎么领？

下一篇

鱼泡直聘分享招工信息到微信教程