CSS规则使文本元素保持一致？

Question

我对CSS规则不太熟悉。我正在寻找负责保持表中元素彼此一致的行为，如下所示：

了解添加到购物车按钮的排列方式是否正确？在我的网站上，例如，当我增加产品名称文本的长度时，它会将添加到篮子按钮向下移动，使得样式不那么有吸引力。

应用哪些规则让它们保持一致，就像这样？

编辑：此示例具体来自Magento 1.9的演示安装，我找不到直接链接，但以下是您可以访问的方式：

1. http://installatron.com/magento/demo
2. 点击Shop Men
3. 点击新来港定居人士

代码实际上包含在包含列表的div元素中。班级名称为product-grid first last odd。

Answer 1

此处示例：jsfiddle

将div.wrap中的每个div.item包含在相对位置。然后每个div.item必须包含一个div.controls，你的行为将被放置 Div.controls必须有position absolute; bottom: 0，这样它总是在相对父包装元素的底部。父包装器元素将根据任何div.item的动态内容增加高度。

.wrapper {position: relative} .controls {position: absolute; bottom: 0} 

每个div.item必须有一个底部空间（padding-bottom）等于div.controls固定高度  .item {padding-bottom: 100px} .controls {height: 100px}

完整的代码在这里：

.wrapper {position: relative; overflow: hidden}
.item {width: 200px; padding-bottom: 100px; float: left; margin-right: 5px}
.item {border-left: 1px solid; border-right: 1px solid; border-top: 1px solid;} /* not relevant*/
.controls {position: absolute; bottom: 0%; width: 100%; height: 100px; background: rgba(0,0,0,0.5)}


<div class="wrapper">
  <div class="item">
    <img src="http://dummyimage.com/160x160/000/fff">
    Lorem ipsum ......

    <div class="controls">
        <button>Button</button>
    </div>
  </div>

  <div class="item">

  </div>
  <div class="item">
  </div>
</div>

Answer 2

这是一个非常快速，基本的代码片段。

<强> Fiddle

修改

更改了OP问题的代码。按需运作。

.item_img {
    width: 100px;
    height: 120px;
    background: red;
}
.item_text {
    max-width: 100px;
    vertical-align: text-top;
}
table, tr, td {
    border: 1px solid black;
    border-collapse: collapsed;
}

<table>
    <tr>
        <td class="item_img"></td>
        <td class="item_img"></td>
    </tr>
    <tr>
        <td class="item_text">Item Text</td>
        <td class="item_text">Item textItem textItem textItem textItem textItem textItem textItem textItem textItem textItem text</td>
    </tr>
    <tr>
        <td><button>Add</button></td>
        <td><button>Add</button></td>
    </tr>
</table>