如何將一個div對齊到另一個頂部，並將另一個div對齊到同一個單元格的底部？

我想創建一個2列布局w/divider inbetween列。我的問題是我想要做的分隔線。我已經標記類似如下：如何將一個div對齊到另一個頂部，並將另一個div對齊到同一個單元格的底部？

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

來源

2010-07-21 user169867

乍看起來很好看。你能發佈一個網址嗎？根據沒有圖像的情況測試佈局很困難。 – RoToRa 2010-07-21 13:27:35

也許你正在使用頁面的舊文檔類型？ – 2010-07-21 13:29:47

我正在使用XHTML transitional <！DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Transitional // EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 「> – user169867 2010-07-21 13:31:48

嘗試設置高度.vr類，有時沒有高度定義的couses問題。

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

來源

2010-07-21 13:39:58

是的，你是對的。檢查我的更新。我希望能夠讓它伸展，但它可能無法使用CSS。 – user169867 2010-07-21 13:41:45

您正面臨着「css div圓角」問題simmilat。在谷歌有很多東西黑客這個。 – 2010-07-21 13:59:04

如何將一個div對齊到另一個頂部，並將另一個div對齊到同一個單元格的底部？

回答

相關問題