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

---

_{补充框大小以防止边框和填充问题}