我有一个包含多行和多列的表格,每个单元格都包含一个链接和一些小图像。链接需要与单元格的顶部对齐,图像需要与底部对齐。不幸的是,使用 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 像素
最佳答案
已更新
引用http://davidwalsh.name/table-cell-position-absolute并得出以下答案...
.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>
关于html - 将两个元素与表格单元格的顶部和底部对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9709921/