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

Question

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

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

更新:

我尝试了@Vadim 的回答，但在我的例子中，分隔符长度应该是动态的，而不是静态的，div 是这样的:

<div class="container">
  <div class="first-div">
    <div class="letter">Q</div>
    <div>another div</div>
  </div>

  <div class="second-div">
     <div class="letter">A</div>
     <div>another div</div>
  </div>
</div>

我想在字母之间画垂直线。行高应根据内部 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>