Html 垂直对齐<；部门>；包含在<；td>；

我有这样的想法：

<tr>
  <td>
    <div class="blue">...</div>
    <div class="yellow">...</div>
  </td>
  <td>
    <div class="blue">...</div>
    <div class="yellow">...</div>
  </td>
</tr>

...
...
...
...

下面是我当前HTML的一个示例：

在一个

内，所有

的高度都相同。我希望这些

中的黄色

沿

底部垂直对齐；蓝色的

沿

顶部垂直对齐。我试图将

垂直对齐

设置为

底部

，但没有成功

---

谢谢

垂直对齐：底部应该可以工作

示例：

编辑

根据新的小提琴

您只需放置

垂直对齐：底部在
td
上，而不是
div上

我更新了你的小提琴：

编辑2

我又读了一遍这个问题，看到了变化

我希望这些
中的黄色
沿垂直方向对齐
的底部；蓝色的
s沿

要做到这一点，你需要

在
td
浮动
div
s
给底部
div
a
margin
一个等于单元格高度减去
div
高度之和的值。在这种情况下，200px-（50px+50px）=100px
新CSS

tr td{
    width:200px;
    height:200px;
    background:red;
    vertical-align:top;
}

div.blue{
    width:50px;
    height:50px;
    background:blue;
    float:left;
}
div.yellow{
    width:50px;
    height:50px;
    background:yellow;
    float:left;
    clear:both;
    margin-top:100px;
}

工作示例：
您是否尝试过
？对不起，我刚刚澄清了我的问题。请查看链接。谢谢我刚刚在garthcn上重读了这个问题。我再次编辑了我的答案伟大的这正是我需要的。谢谢