html/css의 흐름도

Question

스크립팅이나 테이블을 사용하지 않고 플로우/스윔 라인 다이어그램을 만드는 좋은 방법이 있습니까? 나는 패킷을 보내는 다른 호스트를 보여주는 것에 대해 이야기하고있다. (따라서 X 축의 호스트, Y의 시간, 대상 호스트의 화살표). 테이블 (특히 여러 열에 걸쳐있는 화살표)에 너무 많은 요소처럼 보이지만 다른 한편으로는 div는 올바른 위치에 수평으로 배치하기가 어렵습니다 (기본적으로 지정된 "열 ").

좋은 방법이 있습니까? 어떤 도우미 프레임 워크인가? (실제로 필요하지 않으면 캔버스 소재를 사용하고 싶지 않습니다.)

편집 : 왜 이미지가 전혀 언급되지 않았는지 잊어 버렸습니다. 다이어그램의 일부 요소는 다음과 같이 표시되어야합니다 : 앞으로 가져 가야 할 액션이며 클릭 할 수 있어야합니다. .

Answer 1

투명한 알파 레이어 (겹침)가있는 PNG 파일을 사용하고 CSS로 절대적으로 배치하는 것이 좋습니다. 귀하의 전반적인 레이아웃을 보지 못했지만, 이것이 귀하의 특정 상황에 가장 적합한 방법이라고 말할 수는 없습니다. 이와 같은 원 대한

샘플 CSS 코드 : 개별 원형 요소 <a class="circle" id="myCircle" href="foo">Foo</a>

a.circle { 
    display:block; 
    height:100px; 
    width:100px; 
    background-image:url(/path/to/circle.png); 
    background-repeat:no-repeat; 
    position:absolute; 
    line-height:100px; 
    text-align:center; 
    } 

코드 :

a#myCircle { 
    top:234px; 
    left:357px; 
} 

클래스 정의가 공유하는 모든 앵커 요소의 속성 세트를 생성 클래스 "원". ID가 "myCircle"인 앵커는 position:relative;이 설정된 부모 요소의 왼쪽 상단 모서리에서 픽셀 234,357의 좌표로 배치됩니다.