Question

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

实际上我对这个问题有两个问题：

是否有任何网页设计方法如何在固定大小的容器中很好地显示不同高度的元素？是否可以平衡他们的身高？
我应该如何将一个div（vm_prod_cat）与顶部和另一个（offsite_selling）对齐到单元格的底部？这可以或多或少地解决我的问题：产品卡的给定组件（例如供应商的地址）将不会具有相同的高度，但布局看起来平衡。我尝试添加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;，没有什么能阻止它们在它们的高度上生长。您需要设置最小安全高度。

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

1 个答案: