如何在html中的两个div之间画线答案

【问题标题】：how to draw lines between two divs in html如何在html中的两个div之间画线
【发布时间】：2017-06-28 00:27:44
【问题描述】：

我正在为传销概念开发一棵树。

我一直致力于显示从数据库中获取的树，以显示用户层次结构。现在我想将父母与其孩子联系起来。它是一棵二叉树，因此每个父母都有两个孩子。

我的代码在 JsFiddle：https://jsfiddle.net/7u9L1bfx/

Jsfiddle 中的 CSS

<center>
  <div style='width:60%'>
    <div class='user' id='1'>
      <p> 1 </p>
    </div>
    <div style='clear:both;'></div>
    <div class='col2 child' id='1'>
      <div class='user'>
        <p>2</p>
      </div>
    </div>
    <div class='col2 child' id='1'>
      <div class='user'>
        <p>5</p>
      </div>
    </div>
    <div style='clear:both;'></div>
    <div class='col3 child' id='2'>
      <div class='user'>
        <p>3</p>
      </div>
    </div>
    <div class='col3 child' id='2'>
      <div class='user'>
        <p>4</p>
      </div>
    </div>
    <div class='col3 child' id='5'>
      <div class='user'>
        <p>6</p>
      </div>
    </div>
    <div class='col3 child' id='5'>
      <div class='user'>
        <p>8</p>
      </div>
    </div>
    <div style='clear:both;'></div>
    <div class='col4 child' id='3'>
      <div class='user'>
        <p>Blank</p>
      </div>
    </div>
    <div class='col4 child' id='3'>
      <div class='user'>
        <p>Blank</p>
      </div>
    </div>
    <div class='col4 child' id='4'>
      <div class='user'>
        <p>Blank</p>
      </div>
    </div>
    <div class='col4 child' id='4'>
      <div class='user'>
        <p>Blank</p>
      </div>
    </div>
    <div class='col4 child' id='6'>
      <div class='user'>
        <p>7</p>
      </div>
    </div>
    <div class='col4 child' id='6'>
      <div class='user'>
        <p>Blank</p>
      </div>
    </div>
    <div class='col4 child' id='8'>
      <div class='user'>
        <p>Blank</p>
      </div>
    </div>
    <div class='col4 child' id='8'>
      <div class='user'>
        <p>Blank</p>
      </div>
    </div>
    <div style='clear:both;'></div>
  </div>
</center>

我需要一个可以简单地画线的 css / javascript / jquery 函数。我会自己把它放入循环中。

【问题讨论】：

你的意思是水平分隔线吗？
您有多个具有相同 id 的元素，这不好
我会将 id 转换为类。你能告诉我我们如何绘制连接父母和它的两个孩子的交叉线？？？
@scaisEdge 我需要像二叉树一样加入父级及其两个子级。
你身边有很多数据可视化库可以用来做这个

标签： javascript jquery html css line

【解决方案1】：

您唯一真正的选择是使用<canvas>。您可以将所有元素堆叠在一个大画布上，然后您必须计算它们的位置并绘制线条。

您的 HTML 将如下所示：

<div id="container">
  <canvas id="canvas">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

然后您必须将容器和画布的大小调整为相同，然后将您的 div 放在上面。然后使用 div 的 offsetTop 和 offsetLeft 的组合，您必须弄清楚它们的位置，然后使用 canvas 绘制函数来绘制线条。

这将为您提供一个基本的方法。尝试创建代码，如果遇到困难可以发布另一个答案。

另一种选择是使用<hr> 元素和transform CSS 属性来旋转和定位，但是这样算起来会很烦人，而且仍然不像画布方法那样干净。

【讨论】：

【解决方案2】：

一种可能的画线是<hr> 标签。

HR Tag

【讨论】：

我知道 HR 标签，但我正在寻找用交叉线连接两个 div 的解决方案。