底部垂直对齐的 HTML 表格和右侧浮动的元素答案

【问题标题】：HTML table with vertical-align bottom and an element with float right底部垂直对齐的 HTML 表格和右侧浮动的元素
【发布时间】：2013-12-30 07:03:53
【问题描述】：

我知道这个问题已经被问死了，但我找不到类似的案例。我有一个 HTML 表格，“th”行的文本通过垂直对齐底部对齐。现在，其中一个标题还包括一个我想浮动到右侧和底部的按钮。所以当然，我用“float:right”将该按钮包装在一个“span”中。但是该列中标题的文本不再触及容器的底部。

这里的例子： http://jsfiddle.net/accelerate/3sqyw/

HTML：

<table>
    <th>Col 1</th>
    <th>Col 2<span class="right-float"><button>Button</button></span></th>
    <th>Col 3</th>
</table>

CSS：

.right-float {
    display: inline-block;
    float: right;
}

table, th {
    border: 1px solid #aaaaaa;
}

table th {
    text-align: left;
    vertical-align: bottom;
    width: 120px;
    height: 40px;
    padding: 0 10px;
}

如果我删除“float:right”，“Col 2”将正确对齐底部，但当然，按钮不再右对齐。那么我需要做些什么来确保 Col 2 沿底部与其余列对齐？

【问题讨论】：

标签： html css css-float html-table vertical-alignment

【解决方案1】：

使用定位而不是浮动。

.right-float {
    position:absolute;
    bottom:0;
    right:0;
}

并在表头上设置相对定位（<th> 上的position:relative;）。

jsFiddle example

【讨论】：

完美，这正是我需要的！
我刚刚意识到这仅适用于 Chrome 和 IE，但不适用于 FireFox 或 Safari。在 Firefox 中，该按钮位于浏览器窗口的最右下角。
好的，我解决了这个问题。基本上，将“th”设置为 relative 在 Firefox 中不起作用，但是将“th”的全部内容包装在一个带有 position:relative 的 div 中将适用于所有浏览器
是的，我自己也看到了这个问题。奇怪的 FF 行为，但 div 包装是一个不错的选择。

【解决方案2】：

尝试调整按钮的height，你会注意到标签也在调整。

.right-float
{
     display: inline-table;
     float: right;
     height: 20px;
}

【讨论】：