HTML에서 두 div 사이에 선을 그리는 방법

Mgs 작업

MLM 개념에 대한 트리를 개발 중입니다.

사용자 계층을 보여주는 데이터베이스에서 가져온 트리를 표시하기 위해 노력했습니다. 이제 부모와 자녀를 연결하고 싶습니다. 이진 트리이므로 각 부모에는 두 개의 자식이 있습니다.

내 코드는 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 함수가 필요합니다. 직접 루프에 넣겠습니다.

사 마니 메

당신이 가질 유일한 진짜 옵션은 <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를 배치해야합니다. 그런 다음 사업부의 조합을 사용 offsetTop하고 offsetLeft, 당신은 자신의 위치를 파악 사용해야합니다 canvas선을 그리는 그리기 기능을.

이것은 당신에게 기본적인 접근 방식을 제공합니다. 코드 생성에 찌르고 막히면 다른 답변을 게시 할 수 있습니다.

또 다른 대안은 <hr>요소와 transformCSS 속성을 사용하여 회전하고 위치를 지정하는 것이지만, 그 수학은 계산하기가 꽤 귀찮고 캔버스 접근 방식만큼 깨끗하지 않을 것입니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

videojs에서 두 마커 사이에 선을 그리는 방법

분류에서Dev

Matplotlib 두 Y 점 사이에 수직선을 그리는 방법

분류에서Dev

두 요인 변수 사이에 여러 선을 그리는 방법

분류에서Dev

두 텍스트 줄 사이에 세로 구분선을 그리는 방법 android?

분류에서Dev

동일한 div에서 두 개의 <a> 태그 사이에 공백을 두는 방법

분류에서Dev

Google지도에서 두 지점 사이에 선을 그리는 방법은 무엇입니까?

분류에서Dev

C # Windows Form에서 두 개체 사이에 선을 그리는 방법은 무엇입니까?

분류에서Dev

HTML에서 두 div 사이에 공간을 추가하는 방법은 무엇입니까?

분류에서Dev

Swift에서 테두리없이 직사각형을 그리는 방법 (MacOS)

분류에서Dev

zsh 셸에서 명령 사이에 선을 그리는 방법

분류에서Dev

Blazor에서 선을 그리는 방법?

분류에서Dev

CSS에서 두 크기 사이에 div를 숨기는 방법

분류에서Dev

ggplot2로 두 선 사이에 밀도 맵을 그리는 방법은 무엇입니까?

분류에서Dev

HTML 및 CSS : 테이블의 일부 행 사이에 선을 두는 방법

분류에서Dev

Leaflet을 사용하여 두 노드 사이에 경로를 그리는 방법

분류에서Dev

html에서 두 div의 오른쪽을 하나씩 표시하는 방법

분류에서Dev

그들 사이에 구분선을 사용하여 두 div의 크기를 조정하는 방법은 무엇입니까?

분류에서Dev

다른 선택 윤곽 div 뒤에 marquee div를 두는 방법?

분류에서Dev

CorePlot-그래프 내의 서로 다른 산점도에서 두 플롯 기호 사이에 연결선을 그리는 방법

분류에서Dev

여러 div의 두 행 사이에 간격을 추가하는 방법

분류에서Dev

PolyLine을 사용하여 Swift iOS에서 두 좌표 사이에 경로를 그리는 방법

분류에서Dev

div의 주어진 픽셀에 수직선을 그리는 방법

분류에서Dev

목록의 각 행 사이에 선을 그리는 방법?

분류에서Dev

두 개의 다이어그램 위에 수직선을 그리는 방법은 무엇입니까?

분류에서Dev

두 테이블에서 열을 선택하는 방법 SQL Server

분류에서Dev

두 테이블에서 열로 행을 선택하는 방법

분류에서Dev

CSS에서 div의 테두리 스타일을 지정하는 방법

분류에서Dev

탐색 창에서 메뉴 항목 사이에 선을 그리는 방법

분류에서Dev

두 점 사이의 선에있는 모든 점을 따라 파이 게임을 그리는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    videojs에서 두 마커 사이에 선을 그리는 방법

  2. 2

    Matplotlib 두 Y 점 사이에 수직선을 그리는 방법

  3. 3

    두 요인 변수 사이에 여러 선을 그리는 방법

  4. 4

    두 텍스트 줄 사이에 세로 구분선을 그리는 방법 android?

  5. 5

    동일한 div에서 두 개의 <a> 태그 사이에 공백을 두는 방법

  6. 6

    Google지도에서 두 지점 사이에 선을 그리는 방법은 무엇입니까?

  7. 7

    C # Windows Form에서 두 개체 사이에 선을 그리는 방법은 무엇입니까?

  8. 8

    HTML에서 두 div 사이에 공간을 추가하는 방법은 무엇입니까?

  9. 9

    Swift에서 테두리없이 직사각형을 그리는 방법 (MacOS)

  10. 10

    zsh 셸에서 명령 사이에 선을 그리는 방법

  11. 11

    Blazor에서 선을 그리는 방법?

  12. 12

    CSS에서 두 크기 사이에 div를 숨기는 방법

  13. 13

    ggplot2로 두 선 사이에 밀도 맵을 그리는 방법은 무엇입니까?

  14. 14

    HTML 및 CSS : 테이블의 일부 행 사이에 선을 두는 방법

  15. 15

    Leaflet을 사용하여 두 노드 사이에 경로를 그리는 방법

  16. 16

    html에서 두 div의 오른쪽을 하나씩 표시하는 방법

  17. 17

    그들 사이에 구분선을 사용하여 두 div의 크기를 조정하는 방법은 무엇입니까?

  18. 18

    다른 선택 윤곽 div 뒤에 marquee div를 두는 방법?

  19. 19

    CorePlot-그래프 내의 서로 다른 산점도에서 두 플롯 기호 사이에 연결선을 그리는 방법

  20. 20

    여러 div의 두 행 사이에 간격을 추가하는 방법

  21. 21

    PolyLine을 사용하여 Swift iOS에서 두 좌표 사이에 경로를 그리는 방법

  22. 22

    div의 주어진 픽셀에 수직선을 그리는 방법

  23. 23

    목록의 각 행 사이에 선을 그리는 방법?

  24. 24

    두 개의 다이어그램 위에 수직선을 그리는 방법은 무엇입니까?

  25. 25

    두 테이블에서 열을 선택하는 방법 SQL Server

  26. 26

    두 테이블에서 열로 행을 선택하는 방법

  27. 27

    CSS에서 div의 테두리 스타일을 지정하는 방법

  28. 28

    탐색 창에서 메뉴 항목 사이에 선을 그리는 방법

  29. 29

    두 점 사이의 선에있는 모든 점을 따라 파이 게임을 그리는 방법은 무엇입니까?

뜨겁다태그

보관