如何让inline-block布局的卡片实现等高效果？

你的问题核心是inline-block布局依赖内容高度，导致同排卡片高度不统一，下面是几个不用硬写固定height的响应式解决方案：

方案1：改用CSS Grid（最推荐） #

Grid布局天生支持同行列高度自动对齐，完全适配移动端优先的开发模式，代码调整非常简单：

.Services {
  border: 2px solid darkgreen;
  text-align: center;
}

/* 移动端：单列布局 */
.servicesWrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px; /* 替代margin，避免外边距重叠 */
  width: 80vw;
  margin: 0 auto;
}

.servicesWrapper .servicesCard {
  background-color: white;
}

/* 桌面端：3列布局 */
@media only screen and (min-width: 640px) {
  .servicesWrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

调整说明：

• 把布局逻辑移到父容器.servicesWrapper，卡片仅负责自身样式
• gap替代卡片的margin，布局更整洁
• 桌面端只需修改列数，所有卡片自动等高

方案2：修复Flexbox布局（可尝试） #

你之前用Flex遇到问题，大概率是容器或子元素属性设置有误，以下是正确写法：

.Services {
  border: 2px solid darkgreen;
  text-align: center;
}

/* 移动端：单列flex */
.servicesWrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 80vw;
  margin: 0 auto;
}

.servicesWrapper .servicesCard {
  background-color: white;
}

/* 桌面端：横向flex，自动等高 */
@media only screen and (min-width: 640px) {
  .servicesWrapper {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .servicesWrapper .servicesCard {
    flex: 1 1 calc(80vw / 3); /* 自适应宽度，支持收缩换行 */
    min-width: 200px; /* 防止窄屏时卡片挤压变形 */
  }
}

关键属性：

• Flex容器默认align-items: stretch，子元素会自动拉伸到同一高度
• flex: 1 1 宽度值让卡片在空间不足时自动换行，保持响应性

方案3：兼容inline-block的临时方案（不推荐） #

如果一定要保留inline-block，可通过以下方式强制等高，但局限性较大：

@media only screen and (min-width: 640px) {
  .servicesWrapper div {
    display: inline-block;
    width: calc(80vw / 3);
    vertical-align: top; /* 统一对齐到顶部 */
    min-height: 400px; /* 用min-height替代固定height，保留有限响应性 */
  }
}

缺点：min-height需要预估内容高度，屏幕尺寸变化时仍可能出现高度不一致的问题，灵活性远不如Grid/Flex。

内容的提问来源于stack exchange，提问作者user22321262