输入和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

---

_{补式箱大小，以防范与边框和填充}