![](/img/trans.png)
[英]How to align elements with different height to the top AND to the bottom in table cells?
[英]Align two elements to the top and bottom of a table cell
我有一个包含多行和多列的表,每个单元格包含一个链接和一些小图像。 链接需要与单元格顶部对齐,图像需要与底部对齐。 不幸的是,使用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 px
提到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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.