如何连接HTML Divs与行？
在我的页面上，我有一组div元素，应该像下图所示的那样连线。 我知道用canvas我可以在这些元素之间画线，但有可能以另一种方式在HTML / CSS？
您可以使用SVG连接两个div只使用HTML和CSS：
<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文件进行造型）
创build一个SVG线，并使用此线来连接上面的div
<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>
哪里，
x1，y1表示第一格的中心
x2，y2表示第二个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> <svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>
定位是一种痛苦，但是可以使用1px宽的div作为线条和位置，并适当地旋转它们。
<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); }
你可以使用https://github.com/musclesoft/jquery-connections 。 这允许您连接DOM中的块元素。
我为我的项目做了这样的事情
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') );
#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; }
<div id="content"> <div id="div1" class="mydiv"></div> <div id="div2" class="mydiv"></div> <div id="line"></div> </div>
绝对可以使用任何数量的库和/或HTML5技术。 你可能可以通过使用像border-bottom属性一样在纯CSS中篡改某些东西，但这可能是非常可怕的。
如果你认真对待这个问题，你应该看看一个用于canvas绘制或者SVG的JS库。 例如，像http://www.graphjs.org/或http://jsdraw2dx.jsfiction.com/
创build一个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）
从这个线程检查我的小提琴： 画一条线连接两个点击的div列
布局是不同的，但基本上这个想法是创build框之间的不可见的div，并添加相应的边界与jQuery（答案是只有HTML和CSS）
