兩個並排的容器，一個延伸

Question

我試圖實現以下佈局： 兩個並排的容器，第一個容器具有固定寬度，第二個容器延伸整個屏幕長度。第二個容器有一個帶容器的子容器，它延伸了其父容器的整個長度。

我已經通過以下方式實現了這一點，但看起來很笨拙，我認爲還有更好的辦法，但我畫的是空白。如果存在，你能否提供更好的解決方案？

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：

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

Answer 1

我不認爲display: table-cell是正確的去與這裏。我用margin-left結合float財產。

入住這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; 
}