css - CSS - 部分文本垂直对齐到表格单元格的底部

Question

如何将一个句子放在顶部，td另一个句子放在底部？

Answer 1

您可以简单地添加另一个 div

.bottom-div {
    bottom: 0;
    left: 0;
    position: absolute;        
}

包装器 div （或表格单元）只需要position: relative;

http://jsfiddle.net/RnZPM/

另一种方法是在此单元格中构建一个高度为 100% 的表格，并在行中使用 align: top 和 bottom。

Answer 2

如果不在td自身内部使用一些进一步的标记，就无法做到这一点。实现此目的的一种方法是使用绝对定位：

<table style="height:200px">
    <tr>
        <td style="position:relative;">
            <div style="position: absolute; top:0px;">Top</div>
            <div style="position: absolute; bottom:0px;">Bottom</div>
        </td>
    </tr>
</table>

我已将样式内联，以向您确切显示应用在何处。有关基于样式表的等效项，请参见此示例。

Answer 3

简单的......！

        <style type="text/css">
        td { height:50px;}
        </style>

        <table width="50%" border="1">
          <tr>
            <td style="vertical-align:bottom">abc</td>
             <td style="vertical-align:top">xyz</td>
          </tr>
        </table>