輸入和div並排輸入佔用所有可用寬度？

Question

對於響應式網站，我希望div和輸入並排坐在一起，我希望輸入佔用所有可用寬度，而不是換行到下一行。

我想div是一個固定的寬度或由其內容決定，我不想爲div設置％寬度。

所以我有這樣的：

但我想這一點：

<div class="cont"> 
    <div class="stuff">Stuff</div> 
    <input value="something" > 
</div> 
.cont { 
    width: 20%; 
    margin: auto; 
    border: 1px solid grey; 
    overflow: auto; 
} 
.stuff { 
    background: blue; 
    height: 200px; 
    float: left; 
    width: 100px 
} 
input { 
    float: right; 
    display: block; 
} 

Answer 1

問題如果換你輸入的跨度和應用此CSS它應該工作：

jsFiddle example

<div class="stuff">Some text</div> 
<span><input type="text" value="something" /></span> 
div { 
    background: #00f; 
    float: left; 
    height: 200px; 
} 
span { 
    display: block; 
    overflow: hidden; 
    padding-left: 10px; 
} 
input { 
    width: 100%; 
} 

Answer 2

如果沒有support IE9或更低的使用calc()財產一樣這個：

input { 
    width:calc(100% - 100px); 
    box-sizing:border-box; 
} 

入住這Demo Fiddle

---

_{補式箱大小，以防範與邊框和填充}