Shop页面无价格产品等高设置：如何实现产品按钮底部对齐

方案1：Flex布局（最通用，推荐） #

这是目前兼容性和易用性最好的实现方式，只需要调整卡片的布局规则即可：

• 单个产品卡片设置为纵向flex布局
• 把除了按钮之外的所有可变内容（产品名称、价格、简介等）包在同一个容器内，给这个容器设置flex: 1让它自动占满卡片剩余空间，自动把按钮挤到卡片最底部

代码示例：

<!-- 结构示例 -->
<div class="product-list">
  <div class="product-card">
    <div class="product-img"><!-- 产品图 --></div>
    <div class="product-content">
      <h4>产品A</h4>
      <p class="price">¥199</p>
    </div>
    <button class="buy-btn">立即购买</button>
  </div>
  <div class="product-card">
    <div class="product-img"><!-- 产品图 --></div>
    <div class="product-content">
      <h4>产品B</h4>
      <!-- 无价格字段 -->
    </div>
    <button class="buy-btn">立即购买</button>
  </div>
</div>

/* 样式示例 */
.product-card {
  width: 220px; /* 自行调整为你的卡片宽度 */
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid #eee;
}
.product-content {
  flex: 1;
  margin-bottom: 12px;
}

方案2：Grid布局 #

如果你已经在使用Grid做卡片布局，可直接通过行模板设置实现：

.product-card {
  display: grid;
  /* 三行分别对应：图片高度自适应、内容区域占剩余空间、按钮高度自适应 */
  grid-template-rows: auto 1fr auto;
  gap: 12px;
}

临时兼容方案（仅适合卡片内容高度差仅来自价格字段的场景） #

如果是老项目不方便调整整体布局，可直接给价格字段设置最小高度，保证有无价格时都占住相同高度：

.price {
  min-height: 24px; /* 数值和你的价格行高保持一致即可 */
}

注意：该方案仅适用于除了价格之外，产品名称、简介等其他内容高度完全一致的场景，否则还是会出现对齐问题。

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