使用jQuery

Question

我的客户要求从文本按钮（请参见附带的照片）连接文本（基本p标签）和按钮的行，我很难找到如何做到这一点并确保其响应速度的方法。

关于如何完成此操作，我有两个想法：

导入线条图像（客户端给了我一个png文件），然后使用CSS使线条正确适合图像。问题是一旦我缩小屏幕尺寸，它将失去正确的位置。我在Codepen上有我的代码，除了那些悬空的行外，其他所有工作都来自上图： https://codepen.io/dec23rd1986/full/PdEoZa/

我也考虑过SVG动画，但是我不确定如何将它与我用于按钮的jQuery合并。我用来在两个按钮和侧面箭头按钮之间来回移动，以及淡入淡出效果。

如果任何人都可以为我指出如何完成此工作的正确方向（文章，视频，最佳方法），我将不胜感激！
最好的问候

   <div class="container-fluid jumbo_features">
    <div class="row">
     <div class="col-md-6">
      <img src="https://image.ibb.co/ijvTfU/feature_meeting.png" class="meeting_img">

      <img src="https://image.ibb.co/hZNxPp/feature_tasks.png" class="tasks_img"></div>

     <div class="col-md-6">
      <button type="button"  class="btn active" aria-pressed="true" id="meeting_button">Meeting</button>
      <button type="button" class="btn" aria-pressed="true" id="tasks_button">Tasks</button>

       <br>
     <p class="meeting_info"><b>Attends Meetings:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
     <p class="meeting_info "><b>Takes meeting notes:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
      <!--Tasks-->
       <p class="tasks_info"><b>Example One</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
              <p class="tasks_info"><b>Example Two</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
              <p class="tasks_info"><b>Example Three</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>

         </div>
          </div>
       </div>

      <br>
       </div>
      </div>  
    </div>

</div>
</div>
       <div class ="meeting_info">
<img src="https://thumb.ibb.co/c4yUFU/line1.png" id="line">

Answer 1

虽然我不清楚为什么您的jQuery可能会干扰您使用行，但是下面是一个简单的SVG示例，它将随着您更改窗口大小而缩放。要使其缩放，您所需要做的就是使用百分比值而不是文字像素值。

如果随着屏幕尺寸的变化有一些比例的变化，那么您可能必须以编程方式更改此代码。如果您提供有关您为何担心与jQuery交互的更多信息，请与他们分享，我将更新答案。

编辑：我已经更新了示例，以粗略地了解我想找的内容（例如，消息不一定总是正确排列）。如果我理解正确，则可以从那里进行完善。另外，您可能希望使用不同尺寸的屏幕来更改百分比。如果是这样，请在CSS中使用@media个查询。

div {
  display: inline-block;
  vertical-align: top;
  width: 32%;
}

#myImg img {
  width: 100%;
}

#mySVG {
  margin-top: 20%;
  margin-left: -10%;
}

#myMsg {
  margin-top: 28.5%;
  padding-left: 10px;
}

<div id="myImg">
  <img src="https://www.yotako.io/images/documentation/balsamiq/containers/android_balsamiq.png" />
</div>
<div id="mySVG">
  <svg height="100%" width="100%">
  <line x1="0" y1="0" x2="50%" y2="0" style="stroke:#000;stroke-width:2" />
  <line x1="50%" y1="0" x2="50%" y2="50%" style="stroke:#000;stroke-width:2" />
  <line x1="50%" y1="50%" x2="100%" y2="50%" style="stroke:#000;stroke-width:2" />
</svg>
</div>
<div id="myMsg">
  <p>Your message goes here</p>
</div>