在可变高度td中对齐div顶部/底部 [英] Align div top/bottom in a variable height td
问题描述
我使用下面的HTML：
我有一个表的变量高度。高度由第一TD内容设置。
在下一个TD我想有2个div。
I am using the HTML below: I have a table with variable height. The height is set by the first TD content. In the next TDs i want to have 2 divs. one align top and the other align bottom.
它似乎无效，因为第二和第三个TD没有明确的高度。
It doesnt seems to work since the 2nd and 3rd TDs have no explicit height.
我正在寻找一个纯HTML / CSS解决方案（不用JS设置高度）
I am looking for a pure HTML/CSS solution (without setting the height with JS)
感谢您的帮助。
<html>
<head>
<title></title>
<style>
div {
border: 1px solid red;
}
td.container {
position: relative;
}
td.container div.a {
position: absolute;
top: 0;
}
td.container div.b {
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td><div>aasd asdas dasd<br />asd asdasdb<br />asd asdc<br /></div></td>
<td class="container"><div class="a">a</div><div class="b">b</div></td>
<td class="container"><div class="a">a</div><div class="b">b</div></td>
</tr>
<tr>
<td><div>aasd asdas dasd<br />aasd asdas dasd<br />aasd asdas dasd<br />aasd asdas dasd<br />asd asdasdb<br />asd asdc<br /></div></td>
<td class="container"><div class="a">a</div><div class="b">b</div></td>
<td class="container"><div class="a">a</div><div class="b">b</div></td>
</tr>
</table>
</body>
</html>
推荐答案
http://jsfiddle.net/ERPSA/
使用position：relative在父的td和位置：绝对的孩子tds ...
这使孩子们使用td作为他们的位置的参考。
Do you mean something like this ? http://jsfiddle.net/ERPSA/ It's done using position:relative on the parent's td and position:absolute on the childs tds ... this make the children using the td as reference for their position.
这篇关于在可变高度td中对齐div顶部/底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
