React+Tailwind CSS实现卡片文本等高的方法

你的核心问题在于<Link>组件未设置为flex布局容器，导致内部图片和文本无法在垂直方向上利用flex属性分配空间。以下是具体修改方案：

关键调整步骤 #

• 将<Link>改为flex-col的flex容器，并设置h-full让它占满父卡片高度
• 给图片添加flex-shrink-0防止被压缩，用flex容器的居中属性统一图片位置
• 给文本容器productText添加mt-auto，让文本区域自动顶到卡片下半部分，确保所有卡片文本底部对齐，图片区域自动填充剩余高度实现等高

修改后的JSX代码 #

<div className='singleCard h-full flex flex-col mx-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-lg' key={item.id}>
  <button className='mx-1 my-1' value={item.brand + item.product_type} onClick={() => { changeIcon(index); saveDispatch({ type: 'SAVE', saveIt: item }) }}>
    {likedIndex[index] ?
      (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="redHeart w-6 h-6">
          <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
        </svg>
      )
      : (
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6" >
          <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
        </svg>
      )
    }
  </button>
  {/* 修改Link为flex容器，占满高度并居中内部元素 */}
  <Link to={`/product/${item.id}`} name={item.brand} className="flex flex-col h-full items-center">
    {/* 图片添加flex-shrink-0，移除固定margin改用容器居中 */}
    <img className='productImg mb-2 flex-shrink-0' src={item.api_featured_image} alt={item.brand + item.product_type}></img>
    {/* 文本容器添加mt-auto，让文本靠底部对齐 */}
    <div className='productText px-2 w-full flex flex-col mt-auto'>
      <p className='productType'>{item?.product_type ? item.product_type.charAt(0) + item.product_type.slice(1).toLowerCase().split('_').join(' ') : item.product_type}</p>
      <p className='productBrand'>
        {item?.brand ? item.brand.charAt(0).toUpperCase() + item.brand.slice(1).toLowerCase() : item.brand} </p>
      <p className='productName'>{item?.name ? item.name.charAt(0).toUpperCase() + item.name.slice(1).toLowerCase() : item.name}</p>
    </div>
  </Link>
  <div className='flex flex-row mt-auto mx-2 my-2'>
    <div className='mr-auto mt-auto'>
      <p className='productPrice'><span className='circleShadow '>£{Number(item.price).toFixed(2)}</span>
      </p>
    </div>
    <div className='addToCart ml-auto mt-auto '>
      <button className='basketProduct' onClick={() => dispatch({ type: 'ADD', payload: item })}>
        <FontAwesomeIcon icon={faBasketShopping} />
      </button>
    </div>
  </div>
</div>

调整后的CSS补充 #

.productText{
    overflow-wrap: break-word
}

.productImg{
    width: 50%;
    height: 180px; /* 设置固定高度，确保所有图片区域高度一致 */
    object-fit: contain; /* 保持图片比例，避免拉伸 */
}

.productType{
    color:rgba(253,210,97,255);
    font-weight: bold;
}

.productBrand, .productName{
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
}

.basketProduct:hover{
    color:rgba(253,210,97,255);
}

.redHeart{
    fill:red;
}

.circleShadow{
    background-image: url('../Images/Backgrounds/grey.png');
    background-size: 22px;
    padding-bottom: 2px;
    padding-left: 15px;
    background-repeat: no-repeat;
}

说明 #

• 若希望图片高度自适应但仍保持区域等高，可去掉productImg的固定高度，仅保留object-fit: contain，此时flex布局会自动让图片区域填充剩余空间。
• mt-auto会将文本容器推到Link容器底部，无论文本内容多少，所有卡片的文本底部都会对齐，从而实现图片区域的等高效果。

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