Question

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

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

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

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

我想通过一个额外的列来实现这一点，我给了background-color黑色和2px宽。它看起来几乎很棒，但在顶部和底部我不希望看到大约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;代替内联块。

位于单元格顶部和单元格

1 个答案: