Html 如何将表格单元格中具有不同高度的元素与顶部和底部对齐？

我在一个Drupal网站上工作，该网站推广几个供应商的农村产品和服务。在主页上，我在网格中显示了一些项目，每个项目都在“产品卡”（供应商、地址、电话、产品图片、产品名称、价格、“立即购买”按钮）上。由于产品的这些属性的每个部分都可能有不同的长度，因此页面的布局非常混乱（请参见此屏幕截图：）

事实上，我对这个问题有两个问题：

有什么网页设计方法可以很好地在固定大小的容器中显示不同高度的元素吗？有可能把他们的身高调平吗

如何将一个div（vm_prod_cat）与单元格顶部对齐，将另一个div（场外销售）与单元格底部对齐？这或多或少可以解决我的问题：给定的产品卡片成分（例如供应商地址）的高度不会相等，但布局看起来会平衡。我试图添加

display:inline块和
垂直对齐：顶部或
垂直对齐：底部属性，但它们对我不起作用

Drupal使用以下表格单元格和div生成网格：

<tr class="row-3 row-last">
<td class="col-1 col-first">
<td class="col-2">
<div class="vm_prod_cat prod_cat_tur">
<div>
<div class="views-field views-field-uc-product-image">
<div class="vm_product">
<div class="offsite_selling">
</td>
<td class="col-3 col-last">
</tr>

---

可以使用“显示：表格”族规则使框的行为类似于表格：

每件物品都可以单独生长。为了避免它们的宽度增加，添加
表格布局：固定，没有什么能阻止他们的身高增长。您需要设置最小安全高度。
谢谢您的回复。但是它仍然不起作用：添加display:table行；最后，盒子顶部的标志完全消失了。（徽标是具有明确高度的背景图像）然后只需为其指定明确高度并插入字符即可。使用此内容，浏览器将其包装在具有显示的元素中：table ceel；值（就像不是用代码编写时将a添加到HTML表中。演示更新：）最后我设法解决了这个问题，非常感谢！除了对齐，我还必须消除边界塌陷：分离；脱色（完全破坏了布局）并在页脚（深棕色框）上添加一个内部包装，显示：block；以便能够添加边距和填充。
.gal {
  width:80%;
  margin:auto;
  text-align:center;
  min-width:350px;
}
.gal article {
  display:inline-table;
  height:300px;
  width:30%;
  min-width:100px;
  box-shadow: 0.5em 0.5em 0.5em,
    inset 0 0 0 1px;;
  margin:10px;
}
.gal article > header ,
.gal article > footer ,
.gal article > div {
  display:table-row;
  padding:0.5em;
  background:gray
}
.gal article > div {
  display:table-cell;
  height:100%;
  vertical-align:middle;
  background:rgba(0,0,0,0.2);
}

<section class="gal">
  <article>
    <header>
      header that takes room it needs
    </header>
    <div>
      content that takes room left
    </div>
    <footer>
      footer that takes room needed
    </footer>
  </article>
<!-- ... and so on -->