div를 상대 왼쪽 상단에 위치 된 내용으로 확장

Question

하나의 페이지에 여러 그래프 (jsPlumb 기반)를 표시하려고 할 때이 문제가 발생합니다. 이후 얼마나 많은 공간을 사용할 수 있는지 상관없이 한 줄에 각 그래프를 나란히 놓고 싶습니다. 나는 테이블을 사용하고 있습니다. (만약 div를 float : 왼쪽으로 사용한다면, 공간이 충분하지 않으면 div 중 일부는 별도의 열).

이제 각 테이블 셀에는 주 div가 포함되어 있으며 두 개 이상의 node-div가 차례로 포함됩니다. jsPlumb이 작동하는 방식은 각 노드에 대해 별도의 div를 만드는 것입니다. 각 노드를 상위 div에 상대적으로 위쪽/왼쪽으로 배치해야합니다.

문제는 각 표 셀의 기본 graphDiv가 내용에 맞게 확장되지 않는다는 것입니다. 일부 그래프 노드 div는 그 노드 밖에 있습니다. 나는 당신이 "절대적으로"위치 된 사업부를 가질 때 고려하지 않았 음을 이해합니다. 하지만 나는 위/왼쪽 좌표와 함께 "상대적"위치 div를 사용하고 있습니다. 같은 것이 적용됩니까? 그렇다면 table-cell/graphDiv의 내용을 포함하도록 테이블 셀을 확장하는 가장 좋은 방법은 무엇입니까? (나는 모든 명확한 수정을 시도하고 모든 스택 오버 플로우 관련 게시물을 보았지만 해결책을 찾을 수 없었다). http://jsfiddle.net/7QkB2/28/

Answer 1

나는 조금 녹슬하지만 제대로 내용을 포함하도록 확장 된 div를 얻기 위해 노력하는 당신의 고통을 공유 : 여기

내가 설정 한 jsfiddle 페이지로의 링크입니다.

http://reference.sitepoint.com/css/relativepositioning 상대 위치 지정을 사용하면 실제로 콘텐츠가 있던 곳에 구멍이 남습니다. 나는 그것을 거의 광학 착시로 생각할 것입니다. - 물체는 여전히 오래된 위치에 보이지 않는 블록을 예약하고 있지만 마치 움직 인 것처럼 보입니다.

따라서 3 노드는 그래프 외부에 떠있는 것처럼 보이더라도 그래프의 왼쪽 상단 모서리에 쌓여 있습니다. 노드의 절대 위치와 상대 위치를 모두 없애면 원래 위치에 맞게 테이블의 크기가 커집니다.

콘텐츠를 몇 픽셀 만 움직이는 경우 일반적으로 위치 상대를 사용하는 것이 좋습니다. 왜 그들이 이런 식으로 작동하도록 CSS를 설계했는지는 나에게는 수수께끼 일 뿐이지 만 렌더링 엔진의 한계와 관련이있을 수 있습니다. position 절대 값을 사용하면 객체는 더 이상 "상자"가 문서에서 공간을 차지하지 않습니다. 위치를 정하기는 쉽지만 관찰 한대로 다른 것의 간격에는 영향을 미치지 않습니다.

정확한 애플리케이션이 확실치 않지만 맞춤법을 지정하는 방법에 따라 창의성을 확보해야 할 수도 있습니다. 치수를 알고 있으면 언제나 지정할 수 있지만, 운이 좋지 않은 것 같아요. 왼쪽 위 모서리를 기준으로 위치를 설정 하시겠습니까, 아니면 다른 노드를 기준으로 위치를 설정 하시겠습니까? 나는 단지 구식 마진을 사용하고 싶을 것이다. 이렇게하면 블록 모델을 유지하면서 테이블에 들어야하는 내용의 위치를 ​​지정할 수 있습니다. 그런 다음 노드 중 하나가 겹칠 필요가 있으면 절대 위치 지정을 사용하여 노드를 배치하십시오.

Answer 2

인라인 블록으로 각 div를 표시하고 주변 div에서 줄 바꿈을 사용하지 않으셨습니까? 배치하지 않고 동적 너비의 내용을 가로로 표시하려면 테이블에 의존 할 필요가 없습니다.

div.graph { 
    display: inline-block; 
} 
div.graph-container { 
    white-space: nowrap; 
}