React卡片底部文本固定定位问题求助：实现自适应布局

要让卡片底部的观看人数/时长文本始终固定在底部，不管上方文本行数多少，用Flexbox就能轻松搞定，具体修改如下：

1. 调整React组件结构 #

把标题和头像包裹到一个单独的容器里，让卡片结构更清晰，方便Flex布局控制：

import React from 'react'
import './Cards.css'

export const Cards = ({streamer, title, avatar, description}) => {
  return (
    <div className="card-container">
      <img src={streamer} alt='Card Image' className="card-img" />
      {/* 新增中间内容容器 */}
      <div className="card-content">
        <h2 className="card-title">{title}</h2>
        <img className="card-profileImg" src={avatar} />
      </div>
      <p className="card-description">{description}</p>
    </div>
  )
}

export default Cards

2. 修改CSS样式 #

利用Flexbox的flex-grow属性让中间内容区自动填充剩余空间，把底部文本推到底部：

.card-container {
    width: 30rem;
    border-radius: 0 0 2rem 2rem;
    box-shadow: 0px 10px 8px #999;
    display: flex;
    flex-direction: column;
    margin: 0.5rem 0.5rem 30px 40px;
    color: white;
    background-color: #3473EC;
    height: 275px;
    /* 保持垂直方向从上到下排列 */
    justify-content: flex-start;
}

.card-img {
    width: 98.75%;
    border: 3px solid #ff636d;
    border-bottom: 0;
    height: 175px;
    /* 图片固定高度，不参与弹性伸缩 */
    flex-shrink: 0;
}

/* 新增的中间内容容器，自动填充剩余空间 */
.card-content {
    flex-grow: 1;
    position: relative; /* 让头像可以基于这个容器定位 */
}

.card-title {
    margin-left: 6rem;
    margin-top: 0.75rem;
}

.card-description {
    font-size: 11px;
    margin-left: 6rem;
    margin-bottom: 0.5rem;
    /* 去掉无效的position:bottom，靠Flex布局固定在底部 */
}

.card-profileImg {
    object-fit: contain;
    width: 60px;
    border-radius: 50%;
    border: 4px solid #FFF;
    /* 用绝对定位替代负margin，布局更稳定 */
    position: absolute;
    top: -32px;
    left: 10px;
}

关键说明 #

• .card-content设置flex-grow:1后，会自动占据图片和底部描述之间的所有剩余空间，不管标题是一行还是两行，都会把描述文本挤到卡片底部。
• 把头像的负margin改成绝对定位，基于.card-content定位，避免因为内容高度变化导致头像位置偏移。
• 去掉了.card-description里无效的position: bottom属性，Flex布局已经能实现固定底部的效果。

内容的提问来源于stack exchange，提问作者Allan Salé