문제 플로팅 요소

Question

두 개의 div가 더 큰 div에 포함되어 있으며 서로 옆에 배치하고 싶습니다. 내 접근 방식은 첫 번째 div를 떠 다니고 포함 된 div에 Overflow : hidden을 설정하는 것이 었습니다. 웬일인지 작동하지 않고 두 번째 div가 첫 번째 ontop으로 끝납니다.

Herse는 데모, http://jsfiddle.net/9xmDP/입니다. 중첩을 시도하고 디버깅 할 때 사용했던 일부 색상 코딩이 있습니다. 코드도 아래에 있습니다. 가입 양식은 로그인 양식 옆에 있어야합니다.

HTML

<div id="container">  
<div id="signupDiv"> 
    <div id="signupLabel"> 
     SignUp 
    </div> 
    <form id="signupForm"> 
     User <input type="text" name="user"><BR/> 
    </form> 
</div> 

<div id="loginDiv"> 
    <div id="loginLabel"> 
      Login 
    </div>    
    <form id="loginForm"> 
     User <input type="text" name="user"><BR/> 
    </form> 
</div> 

CSS

#container{ 
    overflow: hidden; 
} 

#signupLabel{ 
    border: solid black 1px; 
    width: 300px; 
} 

#signupDiv{ 
    float:left; 
} 

#loginLabel{ 
    border: solid red 1px; 
    width: 300px; 
    } 

#loginDiv{ 
    width: 300px; 
    border: solid pink 1px; 
} 

Answer 1

이 CSS를 사용해보세요. 바이올린 here

#container{ 
width:604px; 
} 

#signupLabel{ 
border: solid black 1px; 
width: 300px; 
} 

#signupDiv{ 
float:left; 
width:300px; 
} 

#loginLabel{ 
border: solid red 1px; 
width: 300px; 
} 

#loginDiv{ 
width: 300px; 
float:left; 
border: solid pink 1px; 
} 

Answer 2

당신은뿐만 아니라 float:left#loginDiv해야합니다. 여기에 업데이트 된 바이올린을 참조하십시오 http://jsfiddle.net/9xmDP/2/

Answer 3

당신이 요소를 떠

, 그것은 정상적인 내용의 흐름에서 제거되고, 시도 부모 요소 부모의 다른 아이들에 어떤 내용이 그것의 주위에 포장 .

그래서 signupDiv은 실제로 왼쪽으로 플로팅되어 부동위에 놓입니다. loginDiv의 콘텐츠는 signupDiv으로 둘러 쌉니다. 두 요소를 모두 300 픽셀로 지정 했으므로 아무 공간도 없으므로 아래에 부동 div 대신이 있어야합니다.

가장 간단한 해결 방법은 다음과 같이, 모두 된 div를 떠하는 것입니다

이

#signupDiv, #loginDiv { 
    float: left; 
} 

Answer 4

당신은 그들에게 모두 떠함으로써, 서로 옆에있는 div를 배치 할 수 있습니다. 당신이 컨테이너 605px을하면 다음 div의는

#container{ 
    width: 605px; 
    overflow: hidden; 
} 

그리고이

#loginDiv{ 
    float: left; 
    width: 300px; 
    border: solid pink 1px; 
} 

Answer 5

으로 모니터 (경계 포함)가에 맞는 : 인라인 .. 여기에 트릭을 할도합니다 http://jsfiddle.net/9xmDP/4/

#loginDiv{ 
width: 300px; 
border: solid pink 1px; 
display:inline-block; 
}