Html 当内容按下按钮时，修复按钮对齐

我已经创建了一些只使用HTML和CSS的产品

我面临的一个问题是，当中的内容超过一定数量时，它会将所有内容向下推，使对齐不均匀（参见图中的第3个产品）。我怎样才能使一切都协调一致呢

我的想法是让h2标签有足够的空间覆盖2或3行（我没有超过2行的产品）。因此，readmore、grams和button将保持固定和内联

你有什么想法或建议吗？我粘贴了代码笔、代码和图像以供参考

@导入url(https://fonts.googleapis.com/css?family=Work+Sans:200300400500）；
* {
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
大纲：无；
字体系列：“工作无”，无衬线；
}
身体{
字体风格：普通；
边缘：0.5em；
线高：1.4；
}
氢{
颜色：#303457；
保证金：2雷姆0.5雷姆；
字体大小：1.25rem；
字体大小：400；
文本转换：大写；
字体大小：粗体；
}
a{
颜色：继承；
}
img{
显示：块；
边界：0；
宽度：100%；
高度：200px；
}
.集装箱{
保证金：自动；
宽度：80%；
填充：10px；
}
/***纸牌***/
.卡片{
显示：网格；
网格模板列：重复（自动填充，最小值（250px，1fr））；
网格自动行：最小最大值（200px，自动）；
网格间距：2rem；
最小高度：400px；
}
.卡片{
/*高度：200px*/
/*背景：红色*/
填充：.5rem；
显示器：flex；
/*-网络工具包盒方向：垂直*/
/*-网络工具包盒方向：正常*/
-ms-flex方向：列；
弯曲方向：立柱；
位置：相对位置；
颜色：#5d5e5e；
}
.缩略图像{
填充物：#c7c4c4；
填充：1rem；
}
.卡片内容{
字体大小：0.9rem；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
-webkit-box-flex:1；
-ms-flex:1；
弹性：1；
文本对齐：居中；
}
.卡片内容{
字号：1rem；
利润率：10px 0px；
}
a、 阅读更多{
字体大小：16px；
字体大小：400；
文字装饰：无；
}
p、 积克{
字体大小：14px；
字体大小：粗体；
}
.btn{
背景色：#303457；
边界：无；
颜色：白色；
填充：12px 0px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
-webkit转换：所有1都可以轻松完成；
-moz转换：所有0.2秒都放松；
-o型过渡：所有0.2秒缓解；
-ms转换：所有0.2秒缓解；
过渡：所有0.2秒缓解；
}
.btn:悬停{
背景色：#3F457E；
光标：指针；
-webkit过渡：背景色0.3s；
-ms转换：背景色0.3s；
过渡：背景色0.3s；
}
.btn：活动{
大纲：无；
}

80g
添加
80克
添加
80克
添加
80克
添加
80克
添加
80克
添加

您可以将H2的高度设置为线条高度的一半（如果您说不会有超过2条线条）

在您的情况下，这些值应该起作用：

h2 {
    line-height: 30px;
    height: 70px;
}

---

您可以将H2的高度设置为线条高度的一半（如果您说不会有超过2条线条）

在您的情况下，这些值应该起作用：

h2 {
    line-height: 30px;
    height: 70px;
}

试试这个。 希望它解决了你的问题

@导入url(https://fonts.googleapis.com/css?family=Work+Sans:200300400500）；
* {
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
大纲：无；
字体系列：“工作无”，无衬线；
}
身体{
字体风格：普通；
边缘：0.5em；
线高：1.4；
}
氢{
颜色：#303457；
保证金：2雷姆0.5雷姆；
字体大小：1.25rem；
字体大小：400；
文本转换：大写；
字体大小：粗体；
}
a{
颜色：继承；
}
img{
显示：块；
边界：0；
宽度：100%；
高度：200px；
}
.集装箱{
保证金：自动；
宽度：80%；
填充：10px；
}
.卡片{
显示：网格；
网格模板列：重复（自动填充，最小值（250px，1fr））；
网格自动行：最小最大值（200px，自动）；
网格间距：2rem；
最小高度：400px；
}
.卡片{
填充：.5rem；
显示器：flex；
-ms-flex方向：列；
弯曲方向：立柱；
位置：相对位置；
颜色：#5d5e5e；
}
.缩略图像{
填充物：#c7c4c4；
填充：1rem；
}
.卡片内容{
字体大小：0.9rem；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
-webkit-box-flex:1；
-ms-flex:1；
弹性：1；
文本对齐：居中；
}
.卡片内容{
字号：1rem；
利润率：10px 0px；
}
.卡片内容h2{
柔性生长：1；
}
a、 阅读更多{
字体大小：16px；
字体大小：400；
文字装饰：无；
}
p、 积克{
字体大小：14px；
字体大小：粗体；
}
.btn{
背景色：#303457；
边界：无；
颜色：白色；
填充：12px 0px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
-webkit转换：所有1都可以轻松完成；
-moz转换：所有0.2秒都放松；
-o型过渡：所有0.2秒缓解；
-ms转换：所有0.2秒缓解；
过渡：所有0.2秒缓解；
}
.btn:悬停{
背景色：#3F457E；
光标：指针；
-webkit过渡：背景色0.3s；
-ms转换：背景色0.3s；
过渡：背景色0.3s；
}
.btn：活动{
大纲：无；
}