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

Question

是否可以在不知道表格单元格高度的情况下将链接推到表格单元格的底部？ 我设置了一个小提琴来说明问题： 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的vertical-align: bottom

编辑评论：

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

Answer 2

在td中添加了valign='bottom'

<table>
        <tr>
        <td valign="bottom"><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>

演示： http ： //jsfiddle.net/77qG5/3/

Answer 3

以此替换您的.button类。为td添加.button类。

td.button { 
    background: red;
    height: 100%;
    Vertical-align: bottom;
}

Answer 4

tdbutton {边框：1px实心#ccc; 高度：100％; 垂直对齐：底部； }