在單元格頂部和單元格底部的位置圖像

Question

我正在創建連接的原理樹。 我使用表來創建它。 第一個單元格包含一個面板。此面板中有一個顏色和一個數字。在面板右側，中間有一條寬度爲15px的水平線。 下一個單元格也是上面的一個面板，但是這個單元格的左邊也有一個水平線，寬度也是15px。 下一行在第二個單元中有一個類似的面板。

 ********  ******** 
-----*  *--------*  * 
    ********  ******** 
        ******** 
       ----*  * 
        ******** 

現在我想第2行被垂直連接到上面的一個：

 ********  ******** 
-----*  *--------*  * 
    ******** | ******** 
       | ******** 
       ----*  * 
        ******** 

我想有一個額外的列，我給黑和2px的廣泛的background-color這樣做的。 它看起來好極了，但在頂部和底部，我不想看到約10px的行。 我想在這裏放置很少的圖像，只是一個白色的塊來越過線。

問題：如何將兩個圖像放置在一個表格單元格中，其中一個位於單元格的頂部，另一個位於單元格的底部？

我試圖與CSS：

.imT { 
    position: relative; 
    top: 0; 
    left: 0; 
    height: 30px; 
    width: 2px; 
    float: left; 
    display: block; 
    vertical-align: top; 
} 

.imB { 
    position: relative; 
    bottom: 0; 
    left: 0; 
    height: 30px; 
    width: 2px; 
    float: left; 
    display: block; 
    vertical-align: bottom; 
} 

任何建議是值得歡迎的。

Answer 1

vertical-align不適用於塊級元素。因此，你需要設置display: inline-block;並刪除float:left;：

.imT { 
    position: relative; 
    top: 0; 
    left: 0; 
    height: 30px; 
    width: 2px; 
    display: inline-block; 
    vertical-align: top; 
} 

.imB { 
    position: relative; 
    bottom: 0; 
    left: 0; 
    height: 30px; 
    width: 2px; 
    display: inline-block; 
    vertical-align: bottom; 
} 

或者，您也可以使用display: table-cell;代替inline-block的的。