如何在物料界面设置卡片内容的固定高度？我应该使用CSS吗？
如何在物料界面设置卡片内容的固定高度？我应该使用CSS吗？
提问于 2020-11-22 22:14:23
这已经让我抓狂了。我正在使用Material-UI卡来显示新闻。然而，我有一个问题。在段落部分，它应该显示一条关于新闻文章的短消息，如果段落部分的内容占两行文本，那么它下面的按钮之间的间距约为10px，但如果段落部分占3行，则段落部分和按钮之间的填充大约为14px。
这里有一张图片，所以你很容易理解它。
正如您所看到的，段落部分和“源和视图”部分之间的间距取决于行数。有人能给出任何解决方案吗？我尝试使用CSS来调整页边距和填充，但它对每张卡片都这样做，所以效果是一样的。我想要做的是能够将段落包含在一个具有固定高度的容器中，以便“源和视图”部分始终保持在适当的位置。
有什么建议吗？
注意:下面是整个Card组件的代码片段：
<Card className={classes.newsCard} raised={true}>
<CardMedia
component='img'
height='140'
src={NewsInfoArray.image}
title='News Image'
/>
<CardContent>
<Typography className={classes.companyName}>
{truncateString(NewsInfoArray.headline, 60)}
</Typography>
<Typography className={classes.subheader}>
{truncateString(NewsInfoArray.summary, 130)}
</Typography>
</CardContent>
<Grid item container direction='row' justify='space-between' spacing={3} alignItems='center'>
<Grid item>
<CardContent>
<Typography className={classes.subheader}>
Source: {NewsInfoArray.source}
</Typography>
</CardContent>
</Grid>
<Grid item >
<CardActions>
<Link target='_blank' rel='noopener' href={NewsInfoArray.url} underline='none'>
<Button
size='large'
className={classes.styledButton}
>
View
</Button>
</Link>
</CardActions>
</Grid>
</Grid>
</Card>回答 1
Stack Overflow用户
发布于 2020-11-22 22:26:43
您是否尝试过在列方向上使用Flex Box，并将包含"source“和"View”的行设置为"flex-end"？它没有遵循将段落包含在固定高度容器中的想法，但它将使这一行始终位于卡片的底部。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64955180
复制相关文章
相似问题
腾讯云开发者
