在可變高度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>

來源

2012-07-25 uriz

你的意思是這樣嗎？ http://jsfiddle.net/ERPSA/ 這是使用位置：相對於父母的td和位置：絕對的孩子tds ... 這使得孩子們使用td作爲他們的位置的參考。

來源

2012-07-25 18:06:02 XhkUnlimit

您的鏈接完全顯示問題。 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上對齊頂部/底部

回答

相關問題