如何將HTML Divs與行連接？

Question

在我的頁面上，我有一組div元素，應該用像下圖所示的線條連接。我知道用畫布可以在這些元素之間畫線，但是可以用另一種方式在html/css中畫線嗎？

Answer 1

這是一種痛苦到的位置，但你可以使用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 2

與任何數量的庫和/或HTML5技術的絕對可能的。你可以通過使用類似border-bottom屬性的東西在純CSS中一起破解一些東西，但它可能會非常黑客。

如果你認真對待這個問題，你應該看看一個JS庫的畫布繪圖或SVG。例如，像http://www.graphjs.org/或http://jsdraw2dx.jsfiction.com/

Answer 3

創建一個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 4

從這個線程檢查我的小提琴：Draw a line connecting two clicked div columns

佈局不同，但基本的想法是創建框之間無形的div並用jQuery添加相應的邊框（答案只有HTML和CSS）

Answer 5

您可以使用https://github.com/musclesoft/jquery-connections。這允許您連接DOM中的塊元素。

Answer 6

您可以使用SVGs僅使用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的中心

您可以檢查它的外觀在片段下方

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

Answer 7

I made something like this to my project

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>