조직도 조정을 동적으로 조정하는 방법

Question

나는 조직도가 있으며 샘플 코드 here을 볼 수 있습니다. 그러나 나는 이것에 대한 몇 가지 도전을 가지고있다.

첫 번째 문제는 사용 가능한 너비가 행 너비보다 작 으면 줄 바꿈을 한 다음 줄을 모두 엉망으로 만드는 것입니다. 같은 줄에 그대로두고 가로 스크롤 막대를 추가하는 방법이 있습니까? 이상적인 해결책은 아니지만 최소한 레이아웃을 그대로 유지해야합니다.

두 번째 과제는 상위에 연결된 동일한 레벨의 행을 갖는 것입니다. 모든 "시험 이름"은 해당 "시험 하위 회사"에 연결되며 측면 선을 사용합니다. 나는 이것을 어디서부터 시작해야할지 모르겠습니다.

세 번째 과제는 각 레벨을 중앙에 배치하는 것입니다. 나는에 대해 생각하고 있었다 :

.orgChart ul li { 
    float: left; //remove 
    display: inline-block; //add 
} 

그러나 그것은 다른 문제를 일으킨다.

위의 도움말 중 하나라도 도움이된다면 감사하겠습니다. 감사.

Answer 1

동일한 줄을 계속 사용하려면 공백을 사용해야합니다. 이제 li을 인라인 블록으로 변환하고 변환하십시오. 한가지 주목할 점은 li의 앞뒤에있는 공백이 줄을 끊었 기 때문에 그 공백을 제거해야한다는 것입니다. 나는 또한 수직 정렬을 추가해야했습니다 : li이 다른 높이 인 경우 줄이 연결되어 있는지 확인하려면 top을 사용합니다. 이것은 또한 센터링 문제를 해결했습니다. 아직 여러 행의 항목에 대해서는 확신 할 수 없지만 적어도 지금은 해결 방법으로 작동합니다.

.orgChart ul { 
    ... 
    white-space: nowrap; 
} 
.orgChart ul li { 
    ... 
    vertical-align: top; 
    display: inline-block; 
} 

당신은 개정 된 바이올린 here을 볼 수 있습니다.