2015-01-20 4 views
1

div가 있고 마우스를 가져 가면 동일한 div가 바로 옆에 나타납니다. 이 호버업 div에서 나는 당신이 포기한 div에 대한 자세한 정보를 제공하고자합니다.div 아래에 콘텐츠가 표시됩니다.

내 문제는; div 아래에 있지만 스타일이 적용된 콘텐츠 (예 : 테두리 반경 & 배경색)

내 HTML :

당신이 가져가해야 할 DIV.

<div id="tankinfo"><p class="info">Content what appears beneath the div.</p></div> 

내 CSS :

.links{ 
    float: left; 
    width: 250px; 
    height: auto; 
    margin-left: 135px; 
    color: white; 
} 
.tank{ 
    height: 175px; 
    width: 250px; 
    padding: 5px; 
    background-color: #CECECE; 
    border-radius: 5px; 
    float: right; 
    margin-top: 75px; 
    font-family: 'Open Sans'; 
    color: white; 
    text-align: center; 
} 
#tankinfo{ 
    height: auto; 
    width: 250px; 
    padding: 5px; 
    font-family: 'Open Sans'; 
    border-radius: 5px; 
    margin-top: 75px; 
    background-color: #CECECE; 
    margin-left: 275px; 
    color: white; 
} 
p.info{ 
    font-family: 'Open Sans'; 
    color: white; 
    width: auto; 
    height: auto; 
    font-weight: 300; 
    top: -5%; 
    margin-left: 5px; 
} 

지금 상황의 이미지; http://imgur.com/IiZvepx

편집 : 표시가있는 상황의 이미지 : 인라인 블록; http://imgur.com/2240A6E

+0

모두 당신 사업부와 p 태그에 옆에있는 당신의 CSS에서 display:inline-block; 필요 했어, display : P 태그에서 인라인 블록 또는 위치 지정을 사용합니다. –

답변

0

문제가 아니며 div의 작동 방식은 블럭 레벨 요소이므로 다른 줄로 떨어집니다.

당신은 기본 디스플레이 스타일 (블록)을 가지고 있으므로 자신의 라인에 앉아, 당신이 하나가 그들을 떠 필요가 서로

+0

실제로 도움이되었습니다. 감사합니다. 내가 지금 가지고있는 유일한 문제는 CSS가 어떻게 든 상단에 추가 여백을 추가한다는 것입니다. 내가 그들을 부양해야합니까? – aDutchCow

관련 문제