html 같은 줄에 divs 넣기

Question

측면에 메뉴가있는 html 사이트에서 작업하고 있는데 메뉴 단추를 누르면 메뉴 옆에 숨겨진 div 팝업이 나타납니다. 모든 것을 아래로 움직입니다. 나는 그것이 showabout() 않는 세 h2 태그 중 하나를 누를 때 그래서

<div style="display:none; padding-left:670px; padding-right:5px; float:left" id="second"> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 

    <font color="#33FF66"><h2 style="cursor:pointer" onclick="showabout()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2></font> 

    <font color="#33FF66"><h2 style="cursor:pointer" onclick="showabout()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2></font><br /> 

    <font color="#33FF66"><h2 style="cursor:pointer" onclick="showabout()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2></font> 

</div> 

function showabout(){ 
    show = document.getElementById("aboutus"); 
    show.style.display = "block"; 
    } 

<div style="display:none; padding-left:20px; float:left" id="aboutus"> 
    <h2>Hey</h2> 
</div> 

: 여기

몇 가지 코드입니다. 숨겨진 hello 태그를 보여 주지만, 아무것도 이동하지 않는 방법에 대한 모든 아이디어를 이동시킵니다.

Answer 1

div은 정의상 block level element입니다. 그 뒤에 줄 바꿈을 원하지 않으면 display: inline;으로 설정해야합니다. (show.style.display = "inline";)

Answer 2

1. 글꼴 태그를 제거하십시오.

2.

<div style="display:none; padding-left:20px; position:absolute; top: 100px; left:100px;" id="aboutus"> 
<h2>Hey</h2></div> 

당신은 픽셀 값으로 플레이해야한다 않았지만 해당 사업부에 팝업 효과를하실 수 있습니다. 그것이 작동하는 방법에 대해 머리를 얻을 수있는 몇 가지 포지셔닝 튜토리얼을하는 것이 좋습니다. 코드 샘플을보고

http://www.alistapart.com/articles/css-positioning-101/