div 요소를 오른쪽으로 겹쳐서 정렬

Question

<div style="border: 1px solid">Hello</div> 
<div style="float: right;border: 1px solid;width: 30%">Centre</div> 
<div style="border: 1px solid">World</div> 

두 번째 div를 오른쪽 너비의 30 %만큼 정렬하려고합니다. 그러나 내가 float를 사용할 때 세 번째 div는 두 번째 div와 겹칩니다. 세 번째 div가 두 번째 div 다음에 오는 것을 확인하려면 어떻게해야합니까? 텍스트 정렬은 전체 div가 내용 만이 아니라 오른쪽에 있도록하기 때문에 도움이되지 않습니다.

좋습니다.

Answer 1

이 코드는 dreamweaver에서 작동하지만 jsfiddle에서 어떤 이유로 작동하지 않습니까? 그 이유를 아는 경우 의견을 남겨주십시오.

http://jsfiddle.net/WAWN2/

<div style="border: 1px solid; width:100%">Hello</div> 
<div style="float: right;border: 1px solid; width:30%; display:block;">Centre</div> 
<div style="border: 1px solid; width:100%">World</div>​ 

또한 여기에 명확한 사용 예입니다 : 당신이 원하는대로 레이아웃을 얻기 위해 두 번째 DIV html로에서 처음으로 위의 두

http://jsfiddle.net/NyFGB/

Answer 2

이동 그것 :

<div style="float: right;border: 1px solid;width: 30%">Centre</div> 
 
<div style="border: 1px solid">Hello</div> 
 
<div style="border: 1px solid">World</div>