在可变高度td上对齐顶部/底部

问题描述：

我使用的HTML如下：我有一个可变高度的表格。高度由第一个TD内容设置。在接下来的TD中，我想要2个div。一个对齐顶部，另一个对齐底部。在可变高度td上对齐顶部/底部

它似乎不起作用，因为第二和第三个TD没有明确的高度。

我要寻找一个纯HTML/CSS的解决方案（没有用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/ 这是使用位置：相对于父母的td和位置：绝对的孩子tds ... 这使得孩子们使用td作为他们的位置的参考。

您的链接完全显示问题。 divs彼此隐藏 – uriz 2012-07-25 18:17:04

如果你知道它是什么，你可以添加一个大小到父div（看http://jsfiddle.net/ERPSA/2/）如果你不知道这些div大小，你总是可以像这样使用行垂直对齐的行（valign）行：http://jsfiddle.net/ERPSA/3/ – XhkUnlimit 2012-07-25 18:30:12

在可变高度td上对齐顶部/底部

相关推荐