html - 将图像定位在单元格顶部和单元格底部

Question

我正在创建连接的示意图树。我使用表格来创建它。第一个单元格包含一个面板。该面板中有颜色和数字。在面板的右侧，在中间我有一条 15px 宽度的水平线。下一个单元格也是一个像上面一样的面板，但是这个单元格的左边也有一条水平线，宽度也是 15px。下一行的第二个单元格中有一个类似的面板。

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

现在我希望第二行垂直连接到上面的行:

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

我想用一个额外的列来做到这一点，我给它指定了黑色和 2 像素宽的 background-color。它看起来几乎很棒，但在顶部和底部我不想看到大约 10px 的线。我想在这里放一些小图片，只是一个白色的 block 来越过这条线。

问题:如何将两张图片放在一个表格单元格中，一张在单元格顶部，一张在单元格底部？

我用 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 不适用于 block 级元素。因此，您需要设置 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。