오른쪽으로 2 div를 플로트 하시겠습니까?

Question

나는 few stackoverflow posts과 other references을 체크 아웃했는데, 수직으로 서로 쌓아 올리는 동안 두 div를 오른쪽으로 띄우는 방법을 알아낼 수 없습니다.

1) 부동는 블록 레벨 요소

2) 여러 수레 "덩어리"로 사업부를 만들어 함께 수평

3) Clear: both/right/left/etc가 허용 : 내 연구에서

여기에 내가 결론을 내렸다 것들입니다 당신은 어느 요소가 부유 요소를 감쌀 것인지를 지정해야합니다.

1) 어떻게 위 또는 서로 아래에 다른 떠 요소를 만들 수 있죠

: 여기

내가 대해 혼란 스러워요 무엇인가?

여기 내 JSfiddle입니다 : 당신이 부유 요소를 추가 할 때 http://jsfiddle.net/VUSKr/

Answer 1

http://jsfiddle.net/VUSKr/6/

로그인을 가지고 등록 권리

#login, #register { 
    background: white; 
    width: 200px; 
    height: 120px; 
    border-radius: 20px; 
    float: right; 
} 

레지스터 명확한 권리

#register{ 
    clear: right; 
} 

Answer 2

당신은 또한 요소를 취소해야합니다. 아래처럼 CSS를 업데이트하십시오.

<br style="clear:right;" /> 

를하고 CSS에서 :

#login, #register { 
background: white; 
width: 200px; 
height: 120px; 
border-radius: 20px; 
float:right; 
clear:both; 
} 

DEMO

Answer 3

#login 가까운 한 후 HTML이 추가

login, #register { 
    background: white; 
    width: 200px; 
    height: 120px; 
    border-radius: 20px; 
    float:right;/* add this*/ 
} 

fiddle

모두 floar 여기 봐 clearing floats

Answer 4

#login, #register { 
    background: none repeat scroll 0 0 white; 
    border: 1px solid red; 
    border-radius: 20px; 
    display: inline-block; 
    height: 120px !important; 
    vertical-align: top; 
    width: 200px; 
} 

Answer 5

당신은 블록 레벨 요소를 떠 때 인라인 블록처럼 동작합니다. 그래서 너는 그들을 함께 모이게한다.

가장 단순하고 내 마음에 가장 좋은 해결책은 두 요소를 다른 div에 묶고 그 대신에 떠 다니는 것입니다. 그런 다음 이동하려는 요소의 표시 속성에는 영향을주지 않습니다.

예 :

.moved {float: right;} 

당신의 바이올린에 대한 업데이트 : http://jsfiddle.net/X993j/1/

Answer 6

가 clear:both; 또는 clear:right; 사용 사이 (요소의면 다른 부동 요소 이 허용되지있는 명확한 속성을 지정합니다.) 두 플로팅 div.당신을 위해 바이올린을 만들었습니다 : Float two divs to right