Question

假设我有这样的代码：

<table>
<tr>
    <td>
        <div id="top">top</div>
        <div id="bot">bottom</div>
    </td>
</tr>
</table>

我正在尝试将#top对齐到单元格的顶部，并通过CSS将#bot对齐到底部。

#top { vertical-align:top; }
#bot { vertical-align:bottom; }

以上似乎不起作用 - 它似乎根本没有任何效果。以下是代码的链接：http://jsfiddle.net/vKPG8/28/

关于为什么会发生这种情况以及如何解决问题的任何解释？

Answer 1

使用position：absolute的已接受解决方案不是针对此问题的跨浏览器兼容解决方案，因为Firefox没有（并且根据规范不应该）允许在表格单元格或带有display：table-的元素中进行绝对定位细胞

似乎没有一种真正可靠的css方法来解决这个问题，尽管我确实有一个仅适用于css的解决方案适用于这种情况。基本上我所做的是插入一个足够高的前元素，以强制文本的底线到底部，因为它有vertical-align：bottom set。这与putding-top基本相同，所以它不是一个解决方案。

演示：http://jsfiddle.net/Be7BT/

td {width:200px;height:100px;border:solid 1px;}
#top { 
    display: inline-block;
    vertical-align:top;
    width: 100%;
}
#bot {
    display: inline-block;
    vertical-align:bottom;
    width: 100%;
}
#bot:before{
    content: '';
    display: inline-block;
    height: 100px;
}

Answer 2

vertical-align用于内联元素，div是块元素。尝试使用position: absolute和top: 0以及bottom: 0。

td {
  position: relative;
  width: 200px;
  height: 100px;
  border: solid 1px;
}

#top, #bot { position: absolute; }
#top { top: 0; }
#bot { bottom: 0; }

演示：http://jsbin.com/iyosac/1/edit
点击此处查看更多信息：http://css-tricks.com/what-is-vertical-align/

Answer 3

我有一个更好的主意，使用嵌套表：

<table width="100px" height="100px" border=1>
    <tr>
        <td valign="top">top</td>
    </tr>
    <tr height=100%>
        <td valign="bottom">bottom
        </td>
    </tr>
</table>

Answer 4

执行此操作的方法是使用from test import run if __name__ == '__main__': run()：

rowspan

文本与单元格的顶部和底部对齐

4 个答案: