하나의 div를 상단에 정렬하고 다른 div를 동일한 셀의 botton에 정렬하는 방법은 무엇입니까?

Question

2 열 레이아웃을 만들려고합니다. 열 사이에 divder가 있습니다. 내 문제는 내가 만들고 싶은 분배기와 관련이있다. 내가 좋아하는 마크 업 한 다음

<div style="display:table"> 

    <!--Left Column--> 
    <div class = "cell" style="min-width:200px;">    
     ...content 
    </div> 

    <!--Divider Column--> 
    <div class="cell vr">    
     <div class="t"></div> 
     <div class="b"></div> 
    </div> 

    <!--Right Column--> 
    <div class="cell" style="width:100%;">    
     ...content 
    </div> 

</div> 

CSS : 나는 그것의 전체 높이를 따라 배경 이미지를 한 후 중복의 상단 이미지를 가지고 중간 세포를 얻으려고 그래서

div.cell { display:table-cell; overflow:hidden;vertical-align:top;} 
    /*Vertical Rule*/ 
    .vr {background:url(Img/vGradient.png) repeat-y; width:6px; position:relative;} /*Vertical Rule Gradient*/ 
    .vr .t {background:url(Img/vGradientT.png) repeat-x; width:6px; height:50px; position:absolute; top:0;} /*Top Of Rule*/ 
    .vr .b {background:url(Img/vGradientB.png) repeat-x; width:6px; height:50px; position:absolute; bottom:0;} /*Bottom Of Rule*/ 

상단의 상단과 하단의 분할 자의 이미지는 셀의 맨 아래에 겹칩니다.

그래도 작동하지 못했습니다. 이 작업을 수행 할 수 있습니까?

UPDATE : 이 작동 ...하지만 높이를 지정하는 대신 분할 테이블이 있어야만큼 키가 큰 일이 저를 강제로 ....에 대한 높이를 설정하는

<div class="cell">   
     <div class="vr" style="height:300px"> 
      <div class="t"></div> 
      <div class="b"></div> 
     </div> 
    </div> 

Answer 1

시도 .vr 클래스, 때로는 높이가 정의 된 문제가 없습니다.

.vr {background:url(Img/vGradient.png) repeat-y; width:6px; height:300px; position:relative;} /*Vertical Rule Gradient*/