如何将HTML Div与行连接？

Question

在我的页面上，我有一组div元素，应该用我在下图中显示的行连接。我知道用画布我可以在这些元素之间画线，但是可以用html / css中的另一种方式吗？

Answer 1

您可以使用SVG仅使用HTML和CSS连接两个div：

<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#777; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:300px; left:300px; background:#333; position:absolute;"></div>

（请使用单独的css文件进行样式设计）

创建一个svg行并使用此行连接上面的div

<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>

其中，

x1，y1表示第一个div的中心和
x2，y2表示第二个div的中心

您可以在下面的代码段中查看它的外观

＆＃13;

＆＃13;

<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#777; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:300px; left:300px; background:#333; position:absolute;"></div>

<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用https://github.com/musclesoft/jquery-connections。这允许您连接DOM中的块元素。

Answer 3

I made something like this to my project

＆＃13;

＆＃13;

function adjustLine(from, to, line){

  var fT = from.offsetTop  + from.offsetHeight/2;
  var tT = to.offsetTop    + to.offsetHeight/2;
  var fL = from.offsetLeft + from.offsetWidth/2;
  var tL = to.offsetLeft   + to.offsetWidth/2;
  
  var CA   = Math.abs(tT - fT);
  var CO   = Math.abs(tL - fL);
  var H    = Math.sqrt(CA*CA + CO*CO);
  var ANG  = 180 / Math.PI * Math.acos( CA/H );

  if(tT > fT){
      var top  = (tT-fT)/2 + fT;
  }else{
      var top  = (fT-tT)/2 + tT;
  }
  if(tL > fL){
      var left = (tL-fL)/2 + fL;
  }else{
      var left = (fL-tL)/2 + tL;
  }

  if(( fT < tT && fL < tL) || ( tT < fT && tL < fL) || (fT > tT && fL > tL) || (tT > fT && tL > fL)){
    ANG *= -1;
  }
  top-= H/2;

  line.style["-webkit-transform"] = 'rotate('+ ANG +'deg)';
  line.style["-moz-transform"] = 'rotate('+ ANG +'deg)';
  line.style["-ms-transform"] = 'rotate('+ ANG +'deg)';
  line.style["-o-transform"] = 'rotate('+ ANG +'deg)';
  line.style["-transform"] = 'rotate('+ ANG +'deg)';
  line.style.top    = top+'px';
  line.style.left   = left+'px';
  line.style.height = H + 'px';
}
adjustLine(
  document.getElementById('div1'), 
  document.getElementById('div2'),
  document.getElementById('line')
);

＆＃13;

#content{
  position:relative;
}
.mydiv{
  border:1px solid #368ABB;
  background-color:#43A4DC;
  position:absolute;
}
.mydiv:after{
  content:no-close-quote;
  position:absolute;
  top:50%;
  left:50%;
  background-color:black;
  width:4px;
  height:4px;
  border-radius:50%;
  margin-left:-2px;
  margin-top:-2px;
}
#div1{
  left:200px;
  top:200px;
  width:50px;
  height:50px;
}
#div2{
  left:20px;
  top:20px;
  width:50px;
  height:40px;
}
#line{
  position:absolute;
  width:1px;
  background-color:red;
}  

＆＃13;

  

<div id="content">
  <div id="div1" class="mydiv"></div>
  <div id="div2" class="mydiv"></div>
  <div id="line"></div>
</div>
  

＆＃13;

＆＃13;

＆＃13;

Answer 4

定位很痛苦，但你可以使用1px宽div作为线和位置并适当地旋转它们。

http://jsfiddle.net/sbaBG/1

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>

<div class="line" id="line1"></div>
<div class="line" id="line2"></div>

.box {
    border: 1px solid black;
    background-color: #ccc;
    width: 100px;
    height: 100px;
    position: absolute;
}
.line {
    width: 1px;
    height: 100px;
    background-color: black;
    position: absolute;
}
#box1 {
    top: 0;
    left: 0;
}
#box2 {
    top: 200px;
    left: 0;
}
#box3 {
    top: 250px;
    left: 200px;
}
#line1 {
    top: 100px;
    left: 50px;
}
#line2 {
    top: 220px;
    left: 150px;
    height: 115px;

    transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
}

Answer 5

绝对可以使用任意数量的库和/或HTML5技术。你可以通过使用像border-bottom属性这样的东西在纯CSS中破解一些东西，但它可能是非常hacky。

如果您对此非常认真，那么您应该查看JS库以获取画布绘图或SVG。例如，http://www.graphjs.org/或http://jsdraw2dx.jsfiction.com/

之类的内容

Answer 6

使用如下代码创建一个div：

CSS

div#lineHorizontal {
    background-color: #000;
    width: //the width of the line or how far it goes sidewards;
    height: 2px;
    display: inline-block;
    margin: 0px;
 }
div#block {
    background-color: #777;
    display: inline-block;
    margin: 0px;
}

HTML

<div id="block">
</div>
<div id="lineHorizontal">
</div>
<div id="block">
</div>

这将显示一个带有到另一个块的水平线的块。

在移动设备上，您可以使用（caniuse.com/transforms2d）

Answer 7

从这个帖子中检查我的小提琴：Draw a line connecting two clicked div columns

布局不同，但基本上想法是在框之间创建不可见的div并使用jQuery添加相应的边框（答案只是HTML和CSS）