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

Question

我正在开发一个 Drupal 网站，该网站用于推广多家供应商的农村产品和服务。在主页上，我在网格中显示了一些项目，每个项目都在“产品卡”上（供应商、地址、电话、产品图片、产品名称、价格、“立即购买”按钮）。由于产品的这些属性的每个部分可能有不同的长度，因此页面的布局非常混乱（参见此截图：http://tinypic.com/r/2i1ede9/5）。

其实我对这个问题有两个疑问：

1. 有没有什么网页设计方法可以很好地在固定大小的容器中显示不同高度的元素？是否可以调整他们的高度？
2. 我应该如何将一个 div (vm_prod_cat) 对齐到单元格的顶部，将另一个 (offsite_sales) 对齐到单元格的底部？这可以或多或少地解决我的问题：产品卡的给定组件（例如供应商地址）的高度不会相等，但布局看起来会平衡。我尝试添加 display: inline-block; 和 the vertical-align: top; 或 vertical-align: bottom; 属性，但它们对我不起作用。

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>

Answer 1

您可以使用 display:table 系列规则让盒子表现得像表格：

.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 -->

在这里查看测试：http://codepen.io/gc-nomade/pen/ALifh

每篇文章都可以单独成长。为了避免它们在宽度上增长，请添加table-layout:fixed;，没有什么可以阻止它们在高度上增长。您需要设置一个最小安全高度。