Css 浮动div服从/不服从垂直对齐

在垂直对齐的表格单元格中，我有一个或两个div。每个div都向右浮动。
按理说，div不应该与底部对齐，但它们确实对齐（我不理解，但这很好）。
但是，当我在单元格中有两个浮动div时，它们将自己对齐到同一顶行。
我想让第一个小的div一直坐在底部。另一个可接受的解决方案是将其设置为表格单元格的全高

很难解释，下面是代码：

桌子{
边界塌陷：塌陷；
}
运输署{
边框：1px纯黑；
垂直对齐：底部对齐；
}
h{
浮动：对；
背景：#FFFFCC；
}
.哈{
浮动：对；
背景：#FFCCFF；
}
@ 
标题文本
第2行
@ 
标题文本
第2行
第3行
标题文本
第2行
标题文本
第2行
标题文本
第2行
123456789
123456789
123456789
123456789
123456789

以下是问题：

为什么@标志与黄色div位于同一水平面

假定垂直对齐不适用于块元素（如浮动div）1。但确实如此

我如何使@sit位于底部或使其达到桌子单元格的全高

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

澄清：目标是将红色@放在表格单元格的底线，黄色框旁边。在任意一个div上使用clear将使它们位于不同的行上。

---

此外，单元格可以有可变的文本行-因此，行高没有帮助。

将

clear:all

添加到第二个元素。如果希望@位于黄色框下方，请将其放在HTML代码的最后。

如果不希望两个div都在同一行上，请不要将它们都向右浮动。

---

如果将@放在标记中文本的下方，然后将浮点设置为“清除”，则会将其放在文本的下方。

我发现本文对于理解和排除垂直对齐问题非常有用：

此属性影响内联级别元素生成的框在线框内的垂直定位。以下值仅对父内联级别元素或父块级别元素（如果该元素生成匿名内联框）有意义；如果不存在这样的父项，则它们无效

CSS中的垂直对齐属性总是令人困惑，因为在大多数情况下，它并没有达到您期望的效果。这是因为它与valign不同，许多HTML4标记都允许使用valign

有关更多信息，您可以查看：

---

David Alpert发布的链接在这方面非常有用。

我从未回答过前两个问题，所以请在下面给出您的答案。但我确实解决了最后一个问题，那就是如何让它工作

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

标题文本
第2行
@

然后我使用了下面的CSS

桌子{
边界塌陷：塌陷；
}
运输署{
边框：1px纯黑；
垂直对齐：底部对齐；
}
t{
位置：相对位置；
宽度：150px；
}
h{
背景：#FFFFCC；
宽度：135px；
右边距：15px；
文本对齐：右对齐；
}
.哈{
背景：#FFCCFF；
宽度：15px；
高度：18px；
位置：绝对位置；
右：0px；
底部：0px；
}

---

这一切的关键是对于一个div来说，它的位置绝对是相对于它的父级的。父级必须声明为position:relative

我已经阅读了这篇文章，并尝试了这两种方法。第二种不适用于这种情况，对于第一种情况，position:absolute将不起作用，因为它相对于页面而不是表格单元格放置它。您需要使用表格吗？两个div中可以是较高的一个，还是始终是最左边的div？单元格中还会有其他内容吗？是的，我需要使用一个表（该表是表格数据，数字行比显示的多）。任何div都可能是最高的，文本行数最多。其他内容，意思是什么？它与所显示的非常接近，javascript有更多的，数字是-ed。

<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> 

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

<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>