在一个vertical-align：bottom的表单元格中，我有一两个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>

这里是问题：

• 为什么@符号与黄色div位于同一水平？
• 假定垂直对齐不适用于块元素(例如div浮动)，但实际上适用！
• 如何使@坐在底部或者使其完全位于表格单元格的高度？

我正在IE7和FF2中进行测试。目标支持是IE6 / 7，FF2 / 3.

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

解决方案

在第二个元素上添加" clear：both"。如果要@放在黄色框下方，请将其放在HTML代码的最后。

如果我们不希望两个div都在同一行，则不要将它们都浮动。
如果将@放在标记中的文本下方，然后将浮点数设置为"清除"，则会将其置于文本下方。

我发现本文对于了解垂直对齐和对其进行故障排除非常有用：

了解垂直对齐或者"如何(不)使内容垂直居中"

http://www.w3.org/TR/CSS2/visudet.html#line-height
    
    This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element, if that element generates anonymous inline boxes; they have no effect if no such parent exists.

CSS中的vertical-align属性总是令人困惑，因为在大多数情况下，它无法实现我们期望的功能。这是因为它与valign不同，valign在许多HTML 4标签中都是允许的。

有关更多信息，我们可以签出：

http://www.ibloomstudios.com/articles/vertical-align_misuse/
http://www.ibloomstudios.com/articles/applied_css_vertical-align/

David Alpert发布​​的链接在此问题上非常有用。

我从未回答前两个问题，因此请在下面提供答案。但是我确实解决了最后一个问题，即如何使其工作。

我在表单元格的两个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