当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Align two elements to the top and bottom of a table cell

问题描述:

I have a table with multiple rows and columns and each cell contains a link and a few small images. The link needs to be aligned to the top of the cell and the images need to be aligned to the bottom. Unfortunately using the vertical-align attribute doesn't work and both elements are being placed in the middle of the cell. Here is the HTML I have so far:

<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>

EDIT: td height and width is also defined at 120 x 90 px

网友答案:

Updated

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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: