垂直对齐</div>中包含的<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/

在<tr>内，所有<td>都具有相同的高度。我希望这些<div>内的黄色<td>在<td>的底部垂直对齐;并且蓝色<div>沿着<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>内的黄色<td>垂直对齐   <td>的底部;并且蓝色<div>沿着垂直方向对齐   <td>

的顶部

要做到这一点，你需要

1. 在vertical-align
上将top设置为td
2. 浮动div s
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/