가변 높이의 div 상단/하단 정렬 td

아래 HTML을 사용하고 있습니다. 가변 높이가있는 테이블이 있습니다. 높이는 첫 번째 TD 내용으로 설정됩니다. 다음 TD는 2 개의 div가 필요합니다. 하나는 상단을 정렬하고 다른 하나는 하단을 정렬합니다.가변 높이의 div 상단/하단 정렬 td

두 번째 및 세 번째 TD에는 명시적인 높이가 없으므로 작동하지 않는 것처럼 보입니다.

나는 당신의 도움을

감사 (JS와 높이를 설정하지 않고) 순수 HTML/CSS 솔루션을 찾고 있어요.

<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 및 위치에서 relative : relative를 사용하여 수행됩니다. 어린이의 경우 tds ... 이렇게하면 td를 자신의 위치에 대한 참조로 사용합니다.

출처

2012-07-25 18:06:02 XhkUnlimit

링크에 문제가 정확하게 표시됩니다. div가 서로 숨어 있습니다 – uriz

부모 div에 크기를 추가 할 수 있습니다 (http://jsfiddle.net/ERPSA/2/에서 확인하십시오). div 크기를 모르는 경우, 다음과 같이 항상 세로로 정렬 된 행 (valign) 행과 함께 행 스파 스를 사용할 수 있습니다. http://jsfiddle.net/ERPSA/3/ – XhkUnlimit

가변 높이의 div 상단/하단 정렬 td

답변

관련 문제