html - 将表格内的图像垂直对齐到底部

Question

一个典型的css对齐问题:

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">           
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>
           <div>text</div>
          <div ></div>
           <img style="vertical-align: bottom;" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/1118727_100000298033362_1412277170_q.jpg"/>
      </td>      
   </tr>
</table>

http://jsfiddle.net/R5TAY/

如何让图片始终出现在表格的底部，而文本保持在中间？

谢谢

Answer 1

根据您的示例，您可以使用定位来实现您想要的:

td {
    position:relative;
}
img {
    position:absolute;
    bottom:0;
}

jsFiddle example