HTML绘制与两行相交的垂直线引导程序答案

【问题标题】：HTML draw vertical line intersecting two rows bootstrapHTML绘制与两行相交的垂直线引导程序
【发布时间】：2022-02-09 15:27:06
【问题描述】：

我试图在两个公文包图标之间画一条垂直线，理想情况下它的位置不固定，因此它会根据屏幕大小进行调整。我附上了容器的副本以及运行时当前外观的屏幕截图。谢谢！

<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>

【问题讨论】：

你能不能把你的 sn-p 变成一个工作的 - 包括 bootstrap 和 fontawesome。

标签： html css bootstrap-4

【解决方案1】：

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

如果这些元素变长但包含的元素被隐藏溢出，它们会合并但不会溢出。

另外，第一个实例的before伪元素不显示，最后一个伪元素的after伪元素不显示。

<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 结构中给出的含义。主要问题是选择“逻辑上”似乎第一个孩子是第一行的东西 - 但这不是因为 p 和 br 元素。

【讨论】：