HTML 绘制与两行相交的垂直线 bootstrap

Question

我正在尝试在两个公文包图标之间画一条垂直线，理想情况下它的位置不是固定的，因此它会随着屏幕尺寸进行调整。我附上了容器的副本以及运行时它当前的样子的屏幕截图。谢谢！

<div class="container2">
             <p style="font-size:64px; color: #555555;text-align:center; font-family: Courier New" >Work Expierence and Education<p>
 <div class="row justify-content-center">
        <div class="col-md-auto">
  <div class="p-2"><p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Intern<p>
    <p style="font-size:24px; color: #555555;text-align:left; font-family: Courier New">Summer 2018<p></div>
        </div>
        <div class="col-md-auto">
            <br>
  <span class="fa-stack" style="vertical-align: middle;">
  <i class="far fa-circle fa-stack-2x"></i>
  <i class="fas fa-briefcase fa-stack-1x"></i>
</span>
</div>
        <div class="col-6">
  <p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Academy<p>
      <p style="font-size:18px; color: #000000;text-align:left; font-family: Courier New"> Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test Test <p>
        </div>
        </div>


        <div class="row justify-content-center">
        <div class="col-md-auto">
  <div class="p-2"><p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Intern 2<p>
    <p style="font-size:24px; color: #555555;text-align:left; font-family: Courier New">Summer 2019<p></div>
        </div>
        <div class="col-md-auto">
            <br>
  <span class="fa-stack" style="vertical-align: middle;">
  <i class="far fa-circle fa-stack-2x"></i>
  <i class="fas fa-briefcase fa-stack-1x"></i>
</span>
</div>
        <div class="col-6">
  <p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Academy<p>
      <p style="font-size:18px; color: #000000;text-align:left; font-family: Courier New"> Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test Test <p>
        </div>
        </div>
    </div>

Answer 1

您可以使用 after 和 before 伪元素从每个圆的底部和顶部绘制垂直线。

如果这些元素变长但包含的元素给定了隐藏溢出，它们会连接起来但不会溢出。

此外，第一个实例显示了before伪元素none，最后一个伪元素显示了after伪元素none。

<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
  <style>
    .col-md-auto:nth-child(2) {
      overflow: hidden;
    }
    
    .col-md-auto:nth-child(2) span.fa-stack {
      position: relative;
    }
    
    .col-md-auto:nth-child(2) span.fa-stack::before,
    .col-md-auto:nth-child(2) span.fa-stack::after {
      content: '';
      background: black;
      position: absolute;
      left: 50%;
      height: 100vh;
      width: 1px;
      display: inline-block;
      z-index: 1;
    }
    
    .col-md-auto:nth-child(2) span.fa-stack::before {
      bottom: 100%;
    }
    
    .col-md-auto:nth-child(2) span.fa-stack::after {
      top: 100%;
    }
    
    div.row.justify-content-center:nth-child(3) .col-md-auto:nth-child(2) span.fa-stack::before,
    div.row.justify-content-center:last-child .col-md-auto:nth-child(2) span.fa-stack::after {
      display: none;
    }
  </style>
</head>

<body>
  <div class="container2">
    <p style="font-size:64px; color: #555555;text-align:center; font-family: Courier New">Work Expierence and Education
      <p>
        <div class="row justify-content-center">
          <div class="col-md-auto">
            <div class="p-2">
              <p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Intern
                <p>
                  <p style="font-size:24px; color: #555555;text-align:left; font-family: Courier New">Summer 2018
                    <p>
            </div>
          </div>
          <div class="col-md-auto">
            <br>
            <span class="fa-stack" style="vertical-align: middle;">
      <i class="far fa-circle fa-stack-2x"></i>
      <i class="fas fa-briefcase fa-stack-1x"></i>
    </span>
          </div>
          <div class="col-6">
            <p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Academy
              <p>
                <p style="font-size:18px; color: #000000;text-align:left; font-family: Courier New"> Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test Test
                  <p>
          </div>
        </div>


        <div class="row justify-content-center">
          <div class="col-md-auto">
            <div class="p-2">
              <p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Intern 2
                <p>
                  <p style="font-size:24px; color: #555555;text-align:left; font-family: Courier New">Summer 2019
                    <p>
            </div>
          </div>
          <div class="col-md-auto">
            <br>
            <span class="fa-stack" style="vertical-align: middle;">
      <i class="far fa-circle fa-stack-2x"></i>
      <i class="fas fa-briefcase fa-stack-1x"></i>
    </span>
          </div>
          <div class="col-6">
            <p style="font-size:32px; color: #000000;text-align:left; font-family: Courier New">Academy
              <p>
                <p style="font-size:18px; color: #000000;text-align:left; font-family: Courier New"> Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test TestTest Test Test Test Test Test Test Test Test Test
                  <p>
          </div>
        </div>
  </div>

给定的 HTML 中似乎有虚假的 p 和 br 元素。

您可能想进一步查看这些内容，看看它们是否有必要 - 它们似乎没有增加 HTML 结构中给出的含义。主要问题是 select 什么 'logically' 看起来第一个 child 是第一行 - 但它不是因为 p 和 br 元素。

HTML 绘制与两行相交的垂直线 bootstrap

HTML draw vertical line intersecting two rows bootstrap

html

css

bootstrap-4