html - 如何将一个 div 对齐到同一单元格的顶部，另一个对齐到底部？

Question

我正在尝试创建一个 2 列布局，在列之间有一个分隔线。我的问题是我想做的分隔线。我有如下标记:

<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*/

所以我试图让中间的单元格在其整个高度上有一个背景图像，然后让顶部图像在顶部重叠在它上面，分隔线的底部图像在底部重叠它单元格。

虽然没能让它发挥作用。这能做到吗？

更新:这行得通……但它迫使我指定一个高度，而不是让分隔线与 table 需要的一样高……

<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*/