在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。 Read here about tabular data。

您不应该使用表格如果：

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