동일한 위치에 Div 위치 지정

Question

일부 div에 문제가 있습니다. 요컨대 여기 내가 필요한 것 : 특정 너비 (같은 너비)를 가진 div 두 개 - 왼쪽은 float이고 오른쪽은 하나, 나머지 공간은 모두 차지하는 세 번째 div. div는 같은 줄에 display : inline-block을 사용하고 있습니다.

나는이 시도 : 여기

<div class="wrapper"> 
     <div class="control leftControl"></div> 
     <div class="display"></div>   
     <div class="control rightControl"></div> 
    </div> 

을 그리고 내 CSS입니다 :

.wrapper { 
    width: 100%; 
    height: 100%; 
    min-width: 960px; 
    background-color: #E8E8E8; 
} 

.control { 
    width: 10%; 
    height: 100%; 
    display: inline-block; 
    background-color: #ADADAD; 
} 

.leftControl { 
    float: left; 
} 

.rightControl { 
    float: right; 
} 

.display { 
    width: 80%; 
    height: 100%; 
    display: inline-block; 
} 

문제 일부 해결에 %를 사용하는 것은에 이동하는 마지막 DIV (CONTROLRIGHT)을 유발한다는 것입니다 새로운 라인. 나는 이유를 이해할 수 있고 디스플레이에서 79 %를 사용하면 div 디스플레이가 거의 올바르게 표시됩니다. (1 %가 취소되었습니다.) 이것이 올바른 해결책이 아니라는 것이 분명합니다. 도움을 주시면 감사하겠습니다.

Answer 1

당신은 모든 요소를 ​​넣을 수 있습니다 float:left하고 항상 100 % 맞는 : fiddle

HTML

<div class="control"></div> 
<div class="display"></div>   
<div class="control"></div> 

CSS float left에 최선을 다하는

.control { 
    width: 10%; 
    height: 200px; 
    background-color: green; 
    float:left; 
} 

.display { 
    width: 80%; 
    height: 200px; 
    background-color:blue; 
    float:left; 
}​ 

단순히으로 div의 하나를 밀어 것입니다 오른쪽에 하나.