다른 div의 div 권한을 어떻게 배치 할 수 있습니까? 그러나 공간을 차지하지 않습니까?

Question

항목 목록 (항목이라고 함)이 있으며 항목 위에 마우스를 놓으면 사용자가 해당 항목과 상호 작용할 수 있도록 div가 표시됩니다 (주제 카드라고 부름). 나의 현재 아이디어는 div를 각 주제 옆에 배치하고 적절하게 배치하는 것입니다. 그러나, 나는 그렇게하는 데 어려움을 겪고있다. 페이지에서 공간을 차지할 수 없으므로 position : absolute를 사용합니다. 그러나 항상 주제의 오른쪽에 위치해야하며 float : left 및 position : absolute의 조합은 주제 카드가 주제와 겹치기 만하면됩니다.

이것에 대한 제안 사항이 있습니까? 나는 또한 어떤 종류의 jquery 제안에 개방적이다. 정말로, 나는 가장 쉽고 가장 표준에 부합하는 것이 무엇이든 할 것이다.

Answer 1

"display"속성을 사용하십시오. "디스플레이 : 인라인"시도 http://www.w3schools.com/cssref/pr_class_display.asp

Answer 2

한 번에에 topicDetails의 최대 하나 개의 집합을 표시 할 수있는 경우를 display = none와 0,0의 위치를 ​​하나 개 DIV 세트가 있습니다. 표시가 필요할 때마다 위치를 적절히 설정하거나 (표시/가져 오기 DOM 요소 또는 표시하는 이벤트를 트리거하는 데 사용하는 모든 것) 위치를 설정하고 내용을로드/설정합니다. 제거 할 때 디스플레이를 없음으로 설정하면됩니다 (다음에 표시 될 새 콘텐츠로 대체되므로 내용을 무시할 수 있음).

Answer 3

많은 jQuery 툴팁 플러그인이 있습니다. 그 중 하나를 사용하여 원하는 방식으로 구성해야합니다. 여기

예와 같은 일부입니다 : http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

Answer 4

당신이 큰 모든 것이 당신이 절대적으로 옆으로 밀어하는 부정적인 right으로 "항목 카드"를 배치 할 수 있습니다 방법을 알고있는 경우 .

#element { 
    margin-right: 100px; 
    position: relative; 
} 
#sidecar { 
    display: none; 
    width: 100px; 
    position: absolute; 
    right: -100px; 
    top: 0; 
} 

그리고이 HTML 구조 :

<div id="element"> 
    <div id="sidecar"> 
    </div> 
</div> 

그리고 이것은 활성화하기 :

이

$('#element').hover(function() { 
    $('#sidecar').toggle(); 
}); 

데모 : http://jsfiddle.net/ambiguous/5a79g/

것은 당신이 모르는 경우이 CSS와 같은 뭔가 jQuery를 사용하여 위치와 너비를 계산할 수 있습니다. offset 및 width 방법.