html - 垂直对齐包含在 中的

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> s 具有相同的高度。我要黄色的<div>里面那些 <td> s 沿着 <td> 的底部垂直对齐;和蓝色<div> s 沿着 <td> 的顶部垂直对齐.我试着设置 vertical-align至 bottom它没有用。

谢谢!

Answer 1

vertical-align:bottom;应该工作

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

编辑

按照新的 fiddle

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

我更新了你的 fiddle : http://jsfiddle.net/jasongennaro/DcRmu/7/

编辑 2

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

I want the yellow <div>s inside those <td>s to align vertically along the bottom of <td>; and the blue <div>s to align vertically along the top of <td>

为此，您需要

1. 设置vertical-align至 top在 td 上
2. float div小号
3. 给底div一个margin等于单元格的高度减去 div 的总和高度。在这种情况下，200 像素 - (50 像素 + 50 像素) = 100 像素。

新的 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/