浮动的Divs服从/不服从垂直对齐

Question

在垂直对齐的表格单元格中:底部,我有一个或两个div.每个div都是浮动的.
据说,div不应该与底部对齐,但它们确实(我不明白,但是很好).
但是,当我在单元格中有两个浮动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. 据说垂直对齐不适用于块元素(如浮动div)1.但确实如此!
3. 如何让@坐在底部或使其成为表格单元格的全高？

我在IE7和FF2中测试.目标支持是IE6/7,FF2/3.

澄清:目标是在表格单元格的底线上显示红色@,在黄色框旁边.在div上使用clear将把它们放在不同的行上.此外,单元格可以有可变的文本行 - 因此,行高不会有帮助.

Answer 1

我发现这篇文章对于理解和排除vertical-align非常有用:

了解vertical-align,或"如何(不)垂直居中内容"

Answer 2

我从未回答过前两个问题，所以请随意在下面给出您的答案。但我确实解决了最后一个问题，即如何让它发挥作用。

我向表格单元格内的两个 div 添加了一个包含 div，如下所示：

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

然后我使用了以下CSS

<style type="text/css">
table {
  border-collapse: collapse;
}
td {
  border:1px solid black;
  vertical-align:bottom;
}
.t {
  position: relative;
  width:150px;
}
.h {
  background: #FFFFCC;
  width:135px;
  margin-right:15px;
  text-align:right;
}
.ha {
  background: #FFCCFF;
  width:15px;
  height:18px;
  position:absolute;
  right:0px;
  bottom:0px;
}
</style>

关键是要使 div 的位置绝对相对于其父级，父级必须声明为position:relative