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

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

虽然无法使其发挥作用。可以这样做吗？

更新：这有效......但它迫使我指定一个高度，而不是让分隔符和桌子一样高......

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

Answer 1

尝试设置.vr类的高度，有时没有高度定义的couses问题。

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

如何将一个div与顶部对齐，另一个与同一个单元的底部对齐？

1 个答案: