底部垂直对齐的 HTML 表格和一个向右浮动的元素

Question

我知道这个问题已经被问死了，但是我找不到类似的案例。我有一个 HTML 表格，“th”行的文本通过 vertical-align: bottom 沿底部对齐。现在，其中一个标题还包含一个按钮，我想将其 float 到右侧和底部。所以当然，我将该按钮包装在带有“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 沿着底部与其余列对齐？

Answer 1

使用定位而不是 float 。

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

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

jsFiddle example