html - 垂直对齐表格单元格内链接的底部

Question

是否可以在不知道表格单元格高度的情况下将链接推送到表格单元格的底部？这是我设置的 fiddle 来说明问题:http://jsfiddle.net/77qG5/1/我希望红色背景的链接与其单元格的底部对齐，但由于其他要求，我无法在单元格上放置固定高度。这是我使用的完整代码:

HTML:

<table>
    <tr>
        <td><div class="button"><a href="#">link text</a></div></td>
        <td>yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda</td>
    </tr>
</table>

和 CSS:

.button { 
    display: table;
    background: red;
    height: 100%;
}
a {
    display: table-cell;    
    vertical-align: bottom;
}
td { 
    border: 1px solid #ccc;
    height: 100%;
}

一次更新:啊，抱歉。我应该说，我们不能将垂直对齐添加到 <td>因为单元格中会有其他内容需要在单元格顶部对齐...我们试图只定位单元格中的特定内容，而不是单元格中的所有内容。

Answer 1

将 vertical-align: bottom 放在包含链接的 td 上

编辑评论:

position: relative; 在 td 上怎么样，position: absolute; bottom: 0; 在 .button 上？ http://jsfiddle.net/77qG5/4/