Material UI固定高度多卡片内容对齐问题求助

你的问题核心在于CardContent内部的Grid容器没有利用flex布局填满内容区域的剩余空间，导致分割线和作者信息会随上方内容长度变化而移动，无法在所有卡片里保持统一位置。

直接修改两处代码即可解决：

1. 给CardContent添加flex属性，让它撑满CardActionArea的剩余空间：

<CardContent sx={{ flex: 1, display: 'flex' }}>

2. 调整内部Grid容器的flex布局，用justifyContent: "space-between"把内容拆分为上下两部分，让分割线和作者信息固定在区域底部：

<Grid 
  sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
  container 
  spacing={2} 
  direction="column"
>

修改后的完整卡片组件代码 #

<BaseStyleCard
    elevation={8}
>
    <CardActionArea
        onClick={props.onClick}
        sx={{
            flexGrow: 1,
            flexDirection: "column",
            alignItems: "stretch",
            display: "flex" // 补全flex容器属性
        }}
    >
        <CardMedia
            component="img"
            alt=""
            height="140"
            image="https://picsum.photos/200/500/"
        />
        <CardContent sx={{ flex: 1, display: 'flex' }}>
            <Grid 
                sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
                container 
                spacing={2} 
                direction="column"
            >
                <Grid item>
                    <Typography variant="h5">
                        <strong>{props.manuscript.title}</strong>
                    </Typography>
                </Grid>
                <Grid item>
                    <Typography variant="body2">
                        {props.manuscript.summary}
                    </Typography>
                </Grid>
                {/* 将分割线与作者信息放在同一个Grid item，确保两者始终绑定对齐 */}
                <Grid item>
                    <Divider/>
                    <Stack
                        justifyContent="space-between"
                        direction="row"
                        sx={{ mt: 1 }} // 给分割线和作者信息添加间距
                    >
                        <Typography variant="subtitle2" color="text.secondary">
                            {firstAuthor?.last_name} et al | { publishedDate }
                        </Typography>
                        <Typography variant="subtitle2" color="text.secondary">
                            <strong>{props.manuscript.type}</strong>
                        </Typography>
                    </Stack>
                </Grid>
            </Grid>
        </CardContent>
    </CardActionArea>
    <CardActions>
        <Button size="small" color="primary">
            Share
        </Button>
    </CardActions>
</BaseStyleCard>

原理说明 #

• BaseStyleCard已经是display: flex且flexDirection: column，CardActionArea的flexGrow:1会撑满卡片除CardActions外的所有空间
• 让CardContent和内部Grid都成为flex容器，通过justifyContent: space-between，标题、描述会占据上方空间，分割线和作者信息则自动被推到下方，无论内容长短都能保持统一位置

内容的提问来源于stack exchange，提问作者Gandalf the Grey