在两个垂直放置的div之间绘制一条垂直线 - CSS？

Question

我正在努力实现这样的目标

带字母的圆圈从第一个div和第二个div的开头开始，其间有一个分隔线。这里应该根据两个div中间的空间来计算线的长度。我尝试了几种但没有运气。请建议我这样做的方法。

更新

我试过@Vadim的答案，但在我的情况下，分隔符的长度应该是动态的，而不是静态的，而div是这样的：

export enum IType
{
Vegitable=0,
Fruits=1,
Fish=2
}

我想画字母之间的垂直线。根据内部div高度，线的高度应该是动态的。

Answer 1

您可以使用flexbox来实现所需的布局：

.container {
  background-color: #ccc;
  padding: 15px;
  
  /* align items in one column and take space defined by content */
  /* this is used for centering separator */
  display: inline-flex;
  flex-direction: column;
}

.letter {
  width: 25px;
  height: 25px;
  background-color: #fff;
  border-radius: 50%;
  
  /* styles for text centering */
  display: flex;
  justify-content: center;
  align-items: center;
}

.separator {
  width: 5px;
  height: 50px;
  border-radius: 3px;
  background-color: #fff;
  margin-top: 5px;
  margin-bottom: 5px;
  
  /* center horizontally */
  align-self: center;
}

<div class="container">
  <div class="letter">Q</div>
  <div class="separator"></div>
  <div class="letter">A</div>
</div>