Html 底部对齐列元素-WordPress CSS

我正在使用Wordpress，其主题为Flatsome。我知道如何使用CSS，但由于HTML和CSS Wordpress以及主题创建，我不知道如何解决这个问题

我有一行，三列大小相等。但是，正如您在我的示例中看到的，某些产品的文本比其他产品的文本长得多。我已经尝试将

display:flex

和

flex:1 auto

应用于

div

s，但这只会导致

align self:start

或

align self:end

整列出现问题

但我的目标是让按钮在每列的同一行对齐。因此，它们应始终在同一

y

坐标上垂直对齐，与上面文本的大小和长度无关

这怎么可能？这里是我的HTML和CSS（我只是复制了WordPress的CSS，不奇怪为什么这么长）

请展开代码段，否则列将显示在移动布局中

产品

施瓦茨蒂
海德堡+蔓越莓+萨恩
10,95欧元
zzgl。

施瓦茨蒂
Mango Vollreif
8,95欧元
zzgl。

施瓦茨蒂
格拉纳塔菲尔+戈吉+桑德多恩贝尔+希姆比尔+瓜拉那
12,95欧元
zzgl。

我假设您不能真正更改HTML结构，因为您使用的是模板。为此，您仍然可以使用flex box，但需要指定信息框的高度（

.box text

），然后只需在按钮上使用

边距顶部：auto

.box文本{
显示器：flex；
弯曲方向：立柱；
高度：300px；
}
.添加到购物车按钮{
页边顶部：自动；
}

产品

施瓦茨蒂
海德堡+蔓越莓+萨恩
10,95欧元

zzgl。

施瓦茨蒂
Mango Vollreif
8,95欧元

zzgl。

施瓦茨蒂
格拉纳塔菲尔+戈吉+桑德多恩贝尔+希姆比尔+瓜拉那
12,95欧元

zzgl。

我假设您不能真正更改HTML结构，因为您使用的是模板。为此，您仍然可以使用flex box，但需要指定信息框的高度（

.box text

），然后只需在按钮上使用

边距顶部：auto

.box文本{
显示器：flex；
弯曲方向：立柱；
高度：300px；
}
.添加到购物车按钮{
页边顶部：自动；
}

产品

施瓦