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上

编辑评论：

如何在td上发送position: relative;，{。1}} .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 { border：1px solid #ccc; 身高：100％; vertical-align：bottom; }

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

4 个答案: