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

Question

I'm working on a Drupal site that promotes rural products and services of several vendors. On the main page I display a few items in a grid, each on a 'product card' (vendor, address, phone, product image, product name, price, 'Buy now' button). Since each part of these attributes of a product may has different lenght, the layout of the page is very confused (see this screenshot: http://tinypic.com/r/2i1ede9/5 ).

Actually I have two questions about this issue:

1. Is there any web designing method how to display elements of different height in fix-sized containers nicely? Is it possible to level their height?
2. How should I align one div (vm_prod_cat) to the top and the other (offsite_selling) to the bottom of the cell? This can solve my problem more or less: a given compontent of product cards (eg address of vendors) won't be of equal height, but the layout would look balanced. I tried to add the display: inline-block; and the vertical-align: top; or vertical-align: bottom; attributes but they didn't worked for me.

Drupal generates the grid with these table cells and divs:

<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

You could use the display:table family rules to have boxes behaving like tables :

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

see test here : http://codepen.io/gc-nomade/pen/ALifh

each article may grow alone. To avoid them to grow on their width, add table-layout:fixed; , nothing will stop them growing on their height. You need to set a minimal safe height.