2 개의 나란히있는 컨테이너 하나가 늘어납니다.

Question

다음 레이아웃을 달성하려고합니다. 두 개의 나란히있는 컨테이너는 첫 번째 컨테이너가 고정 폭을 가지고 두 번째 contaner가 화면의 전체 길이를 늘립니다. 두 번째 컨테이너에는 부모 컨테이너의 전체 길이를 늘리는 여백이있는 하위 컨테이너가 있습니다.

나는 이것을 다음과 같은 방법으로 얻었지만,보기가 어색하고 더 좋은 방법이 있다고 생각하지만, 나는 공백을 그리고있다. 더 나은 솔루션을 제공 할 수 있습니까?

http://jsfiddle.net/7Ack4/

CSS :

.c1 { 
     display: table; 
     width:100%; 
     height:40px; 
     border:2px solid black; 
    } 

.c1> div:first-child { 
    display:table-cell; 
    width:100px; 
    background-color:blue; 
} 

.c1> div:last-child { 
    display:table-cell; 
} 

.c1 > div:last-child > div { 
    position:relative; 
    height:100%; 
    width:100% 
} 

.c1> div:last-child > div > div { 
    position:absolute; 
    left:5px; 
    right:5px; 
    bottom:5px; 
    top:5px; 
    background-color:red; 
    border-radius:10px; 
} 

HTML : 나는 display: table-cell 여기에 갈 권리라고 생각하지 않습니다

<div class="c1"> 
    <div> 
    </div> 
    <div> 
     <div> 
      <div></div> 
     </div> 
    </div> 
</div> 

Answer 1

.

나는 float 속성과 조합하여 margin-left을 사용했습니다.

확인이 fiddle

.c1 { 
    width:100%; 
    height:40px; 
    border:2px solid black; 
} 
.c1> div:first-child { 
    width:100px; 
    background-color:blue; 
    height: 100%; 
    float: left; 
} 
.c1> div:last-child { 
    margin-left: 100px; 
    height: 100%; 
} 
.c1 > div:last-child > div { 
    position:relative; 
    height:100%; 
    width:100% 
} 
.c1> div:last-child > div > div { 
    position:absolute; 
    left:5px; 
    right:5px; 
    bottom:5px; 
    top:5px; 
    background-color:red; 
    border-radius:10px; 
}