css - float Div 服从/不服从垂直对齐

Question

在 vertical-align:bottom 的表格单元格中，我有一个或两个 div。每个div都向右浮动。
据推测，div 不应与底部对齐，但它们确实如此(我不明白，但很好)。
但是，当我在单元格中有两个 float div 时，它们将自己对齐到同一顶线。
我希望第一个较小的 div 一直位于底部。另一种可接受的解决方案是使其成为表格单元格的全高。

这很难解释，所以这是代码:

<style type="text/css"> 
table {
   border-collapse: collapse;
}
td {
   border:1px solid black;
   vertical-align:bottom;
}
.h {
   float:right;
   background: #FFFFCC;
}
.ha {
   float:right;
   background: #FFCCFF;
}
</style> 

<table> 
  <tr> 
    <td> 
      <div class="ha">@</div> 
      <div class="h">Title Text<br />Line 2</div> 
    </td> 
    <td> 
      <div class="ha">@</div> 
      <div class="h">Title Text<br />Line 2<br />Line 3</div> 
    </td> 
    <td> 
      <div class="h">Title Text<br />Line 2</div> 
    </td> 
    <td> 
      <div class="h">Title Text<br />Line 2</div> 
    </td> 
    <td> 
      <div class="h">Title Text<br />Line 2</div> 
    </td> 
  </tr> 
  <tr> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
  </tr> 
</table> 

问题如下:

1. 为什么 @ 符号与黄色 div 处于同一水平？
2. 据称垂直对齐不适用于 block 元素(如 float div)1。但它确实适用!
3. 如何使 @ 位于底部或使其达到表格单元格的全高？

我正在 IE7 和 FF2 中测试。目标支持IE6/7、FF2/3。

说明:目标是在表格单元格的底线上放置红色@，在黄色框的旁边。在任一 div 上使用 clear 会将它们放在不同的行上。此外，单元格可以有可变的文本行 - 因此，line-height 将无济于事。

Answer 1

我发现这篇文章对于理解和解决垂直对齐非常有用:

Understanding vertical-align, or "How (Not) To Vertically Center Content"