将 <span> 定位在 <td> 表格单元格的底部答案

【问题标题】：position a <span> at the bottom of a <td> table cell将 <span> 定位在 <td> 表格单元格的底部
【发布时间】：2013-12-07 17:19:12
【问题描述】：

我试图让<span> 坐在固定高度<td> 的底部，但它似乎不起作用。

我正在使用 Firebug 在 Firefox 中进行开发，这是我的标记和 CSS。

我已阅读其他帖子，指出需要修复 td 高度，我已经做到了，但是我仍然遇到同样的问题。如何将跨度定位在 td 的底部？

<td class="details_amount">
  <span class="item_total_price">
    £<span id="amount_99201100099">49</span>
  </span>
  <br>
  <span class="person_price">£5</span>
</td>

td {
    height: 55px;
    padding-top: 1.8em;
    vertical-align: top;
}

.item_total_price {
    height: 100%;
}

.person_price {
    bottom: 0;
    position: relative;
}

【问题讨论】：

把position:relative 放到td 和position:absolute;bottom:0; 到.person_price 。
@Vucko 谢谢，我试过了。但它不起作用 - 我显然遗漏了一些明显的东西，但不确定是什么......
喜欢this?
@Vucko 哦。你在 Chrome 中创建了那个小提琴吗？查看我的 Firefox 屏幕截图 - i.stack.imgur.com/bzvs7.png - 它会将其置于页面底部。我在 Chrome 上查看了您的 Fiddle，但它按预期工作。为什么 FF 会表现出这种行为？
如果您有多个td，请使用display:inline-block，这样就可以了。 :)

标签： css css-position html-table html

【解决方案1】：

绝对的，而不是相对的。

.person_price {
    bottom: 0;
    position: absolute;
}

【讨论】：

仅此一项会将其放置在页面底部，而不是表格单元格。

【解决方案2】：

.person_price 需要 position:absolute 而不是 position: relative：

.person_price {
   position: absolute;
   bottom:0;
   left:0;
}

并且还让他的父母relative：

td {
  position:relative;
}

【讨论】：

嗯...我在发布之前尝试过这个，但它不适合我。它将它定位在页面底部，即 with 相对定位附加到td。
谢谢你，它确实有效——它只需要td 上的display: block 来支持Firefox。我已对帖子进行了编辑。