html - 使文本元素彼此保持一致的CSS规则？

Question

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

看看添加到购物车按钮是如何正确排列的？例如，在我的网站上，当我增加产品名称文本的长度时，它会将“添加到购物车”按钮向下移动，从而降低样式的吸引力。

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

编辑:这个示例具体来自 Magento 1.9 的演示安装，我找不到直接链接，但您可以通过以下方式访问它:

1. > http://installatron.com/magento/demo
2. 点击店员
3. 点击新品

代码实际上包含在一个包含列表的 div 元素中。类名是 product-grid first last odd。

Answer 1

这是它如何工作的一个非常快速、基本的片段。

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>