在html表格单元格中，如何强制图像成为具有不同高度的左下角和右下角？

Question

我有一张有文字和图像的桌子。现在我想添加一些图像，并使它们与单元格底部对齐。什么是正确的CSS来强制图像对齐到一个单元格的左下角？

以下是相关的CSS：

 .bottomRight {
     bottom: 0;
     float: right;
  }

.bottomLeft {
    bottom: 0;
    float: left;
  }

这是我的html：

   <td width="240">

    <span style="float:right;margin-left: 1px; margin-bottom: 1px;">
        &nbsp;&nbsp;<b></b>
    </span>
    Info
    <br/><br/>

     <img src="/Content/shortImage.png" class="bottomLeft">
     <img class="bottomRight" height="35" width="35" title="Name" src="/Content/tallImage.jpg" >
 </td>

图像tallImage.jpg确实工作并显示在右下角，但高度较小的shortImage.png并没有一直到表格单元格的底部。

对于如何让shortImage和largeImage与表格单元格的底部对齐有什么建议吗？

Answer 1

使用vertical-align:bottom;

如果区分选定的元素，为什么不使用类？

http://jsfiddle.net/SinisterSystems/x3vc7/2/

HTML:

<table>
    <tr>
        <td>Hello world</td>
        <td class="image">
            <img src="http://www.itworldcanada.com/wp-content/uploads/2013/08/Windows-XP-migration-FEature-Image-42x42.jpg" />
        </td>
    </tr>
</table>

CSS:

td {
    height:200px;
    border:1px solid #000;
}
.image {
    vertical-align:bottom;
}

编辑：

我说让我们继续在chat中讨论这个问题。如果您的想法是显示non-tabuler-data。在这里阅读有关表格数据的内容。

在下列情况下，不应使用表：

表的主要目的是以某种方式将内容放在页面上。例如，在图像周围添加间距，将“项目”图标放置在列表中，或者强制一个文本块充当拉引号。