垂直对齐<td>中包含的<div>

Question

我有这样的事情:

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

这是我当前HTML的一个例子:http://jsfiddle.net/DcRmu/2/

在a里面<tr>,所有<td>的都有相同的高度.我希望<div>那些内部的黄色s <td>沿着底部垂直对齐<td>; 和蓝色<div>s沿顶部垂直对齐<td>.我试图设置vertical-align到bottom和它没有工作.

谢谢!

Answer 1

vertical-align:bottom; 应该管用

示例: http ://jsfiddle.net/jasongennaro/DcRmu/

编辑

按照新的小提琴

你只需要vertical-align:bottom;放在td不上div

我更新了你的小提琴:http://jsfiddle.net/jasongennaro/DcRmu/7/

编辑2

我再次重读这个问题,我看到了变化

我希望<div>那些内部的黄色s <td>沿着底部垂直对齐<td>; 和蓝色<div>s沿顶部垂直对齐<td>

要做到这一点,你需要

1. 设置vertical-align于top上td
2. 漂浮divs
3. 给底部div一个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;
}

工作示例: http ://jsfiddle.net/jasongennaro/DcRmu/9/