Question

如何对齐td顶部的一个句子和底部的另一个句子？

Answer 1

您可以使用

添加另一个div

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

并且包装器div（或table-cell）只需要position: relative;

http://jsfiddle.net/RnZPM/

另一种方法是在此单元格中构建一个表格，其高度为100％，并且对齐为对齐的行：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>

我将样式设为内联，以准确显示正在应用的位置。有关基于样式表的等效文件，请参阅this example。

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>

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

3 个答案: