假设我有这样的代码:
<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/
关于为什么会发生这种情况以及如何解决的任何解释？
使用position:absolute的公认解决方案不是针对此问题的跨浏览器兼容解决方案,因为Firefox不会(并且根据规范不应该)允许在表格单元格或具有display:table-cell的元素中进行绝对定位.
似乎没有一种真正可靠的css方法来解决这个问题,尽管我确实有一个仅适用于css的修复程序适用于这种情况.基本上我所做的是插入一个足够高的前元素,以强制文本的底线到底部,因为它有vertical-align:bottom set.这与填充顶部基本相同,因此它不是一个解决方案.
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;
}
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/
td {
position: relative;
width: 200px;
height: 100px;
border: solid 1px;
}
#top, #bot { position: absolute; }
#top { top: 0; }
#bot { bottom: 0; }<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td>
<div id="top">top</div><br/>
<div id="bot">bottom</div>
</td>
</tr>
</table>
</body>
</html>