오른쪽으로 두 div를 플로팅

Question

오른쪽에 두 div를 서로 띄우고 싶습니다. 가장 오른쪽의 div는 가변 텍스트를 가지므로 왼쪽 div가 왼쪽으로 계속 이동하지만 가변 데이터로 오른쪽 div에 붙어 있기를 원합니다. 내가 플로트 할 때 : 왼쪽 div가 오른쪽 div를 바꿉니다.

<div class="wrap"> 
<div class ="left">static data<div> 
<div class ="right">variable data<div> 
<div class="wrap"> 

css 
.left{ 
    float:right; 
    width:69%; 
    display:block; 
    } 
.right{ 
    float:right; 
    width:28%; 
    display:block; 
} 
.wrap{ 
width:100%; 
} 

오른쪽 및 왼쪽 div에는 div가 있지만 클래스는 없습니다. 이 문제를 어떻게 처리 할 수 ​​있습니까? 표시 할 때 왼쪽 div가 오른쪽 div를 차지합니다.

감사합니다,

Answer 1

나는 방금 된 div를 교체 할 생각합니다.

제 자식 DIV 번째 오른쪽 부유 DIV가 처음

FIDDLE

<div class="wrap"> 
    <div class ="right">variable data</div> 
    <div class ="left">static data</div> 
</div> 

CSS의 왼쪽에 표시되는 우측

줄곧 부유

.left, .right{ 
    float:right; 
} 

Answer 2

블록 형식화 컨텍스트라는 것을 트리거하려고 할 수 있습니다. 파트너의 overflow 속성을 기본값과 다른 값으로 설정하기 만하면됩니다. 후위 지원 (예 : 가족)이 필요한 경우 zoom: 1;으로 게임하십시오. 또한, 부동 div를 먼저 넣으십시오.

http://jsfiddle.net/GMwjQ/

이

.right { 
    width: 28%; 
    float: right; 
} 
.left { 
    overflow: auto; 
} 
.wrap{ 
    width:100%; 
} 

<div class="wrap"> 
    <div class ="right">variable data</div> 
    <div class ="left">static data</div> 
</div> 

이미 어딘가에 SO에서이 대답을 게시 스레드를 존재한다. 그것을 찾을 수 없습니다.

Answer 3

HTML에서 div를 교체하지 않고 래퍼 div를 오른쪽으로 띄우고 하위 div를 인라인 블록으로 만듭니다.

css 
.wrap{ 
    float: right; 
} 
.left{ 
    width: 69%; 
    display: inline-block; 
    } 
.right{ 
    width: 28%; 
    display: inline-block; 
}