将两个元素与表格单元格的顶部和底部对齐

Question

我有一个包含多行和多列的表格，每个单元格中都包含一个链接和一些小图片。链接需要与单元格顶部对齐，而图片需要与底部对齐。不幸的是，使用 vertical-align 属性无效，两个元素都被放置在单元格中间。以下是目前的 HTML：

<table>
  <tr>
    <td style='width:120px; height:90px;'>
      <a href='1.html' style='vertical-align:top'>Link 1</a>
      <div style='vertical-align:bottom'><img src='1-1.jpg' /><img src='1-2.jpg' /></div>
    </td>
    <td style='width:120px; height:90px;'>
      <a href='2.html' style='vertical-align:top'>Link 2</a>
      <div style='vertical-align:bottom'><img src='2-1.jpg' /><img src='2-2.jpg' /></div>
    </td>
  </tr>
  <tr> ... </tr>
</table>

编辑：td的高度和宽度也定义为120 x 90像素

- kanoko

Answer 1

更新完成

Referred to http://davidwalsh.name/table-cell-position-absolute and came up with the following answer...

.tlink {
  position: relative;
  height: 100%;
}
.bimg {
  bottom: 0;
  position: absolute;
}

<table height="250" border="1">
  <tr>
    <td>
      <div class="tlink">
        <a href='#'>Link One</a>
        <div class="bimg">
          <img src="http://farm4.static.flickr.com/3575/3293166516_de2cd751fc.jpg" width="50" height="50" />
        </div>
      </div>
    </td>
  </tr>
</table>

- neo108

---

我尝试了使用像你一样的style元素的解决方案，并尝试了使用style属性进行内联，但是我没有看到垂直对齐方面的任何变化。 - kanoko

太好了！现在我明白为什么div通常比表格更受欢迎了。 - kanoko

你的回答的第一部分似乎是错误的。第二部分（fiddle）正在做另一件事情（交替将单元格顶部和底部对齐），你可以使用<table>轻松完成这个操作。如果您能删除答案的第一部分并澄清第二部分，那将会很有帮助。 - Bennett McElwee

真的是一个非常糟糕的回答。这个回答中有90%的内容都是在重复问题所说的不起作用的部分，而且并不出奇地，它确实没有起作用。这也表明回答者在发布回答之前甚至没有测试过它。然后第二部分（甚至没有包含在这个实际页面上）展示了使用错误工具的非常糟糕的做法（如果你想显示一个表格，使用table标签）。 - Manachi

非常抱歉发布了错误的答案。我仔细查看了原始答案，可以清楚地看到其中的缺陷。我已经更新了答案。当然，在更新的答案中还有需要改进的地方，欢迎提出建议。 - neo108