垂直对齐CSS未对齐

Question

我正在遇到与我正在研究的vape网站上的产品垂直对齐的问题，我似乎无法调整产品，原因主要是因为描述长度，星级和价格/销售差异了到3行。

理想情况下我想对齐：

  

图片的顶部

和

  

添加到购物车/选择选项

不仅仅是现在的一个或另一个。

这是我正在研究的vape site。

有人能帮忙吗？

Answer 1

在包含类box-text box-text-products text-center grid-style-2的div中，我将添加另一个类或将以下内容添加到box-text类中。

  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;

然后将align-self:end添加到包含price-wrapper＆amp;类的div中add-to-cart-button。您可能还需要确保将包含div的整体设置为100％的高度，我认为它是具有col-inner类的div。如果您对使用css网格有更多疑问，可以参考CSS Trick Guide to Grid。