垂直对齐底部，用于表格单元格内的链接 [英] Vertical align bottom for a link inside a table cell

问题描述

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

Is it possible to push a link to the bottom of it's table cell without knowing the height of the table cell? Here's a fiddle I set up illustrating the problem: http://jsfiddle.net/77qG5/1/ I'd like the link with the red background to be aligned to the bottom of it's cell, but I can't put a fixed height on the cell due to other requirements. Here's the full code I'm using:

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> 中添加垂直对齐，因为单元格中的其他内容需要在顶部对齐单元格...我们试图仅针对单元格中的特定内容而不是单元格中的所有内容。

One update: Ah, sorry. I should have said, we can't add vertical-alignment to the <td> because there will be other content in the cell that needs to be aligned at the top of the cell... We're trying to just target specific content in the cell but not all the content in the cell.

推荐答案

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

Put vertical-align: bottom on the td containing the link

编辑评论：

如何回合位置：相对; 在td，位置：绝对;底部：0; on .button？ http://jsfiddle.net/77qG5/4/

How bout position: relative; on the td, position: absolute; bottom: 0; on .button? http://jsfiddle.net/77qG5/4/

这篇关于垂直对齐底部，用于表格单元格内的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！