css - 将项目设置为具有所有可用空间宽度

Question

我有以下 HTML 片段：

<div id="container">
  <div id="left">Left block</div>

  <input type="text" />

  <div id="right">Some longer than 200px text</div>
</div>

和 CSS：

#container {
  width: 100%;
}
#left {
  width: 200px;
  float: left;
  border: 1px solid black;
}
#right {
  min-width: 200px;
  float: right;
  border: 1px solid black;
}
input {
  float: left;
}

是否可以设置input为具有所有可用空间宽度？我的意思是它应该#left从右边界开始并以#right左边界结束。

Answer 1

你可以用额外的来做到这一点div：

<div id="container">
  <div id="left">Left block</div>

  <div id="right">Some longer than 200px text</div>
</div>
<div id="main">    
  <input type="text" />
</div>​

#container {
  width: 100%;
}
#left {
  width: 200px;
  float: left;
  border: 1px solid black;
}
#right {
  min-width: 200px;
  float: right;
  border: 1px solid black;
}
#main {
    margin: 0 210px 0 210px;
}
input {
  width: 100%;
}​

jsFiddle：http: //jsfiddle.net/NQevQ/

Answer 2

使用弹性盒：

#container {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
input {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    flex: 1;
}

小提琴

除 IE支持表外，所有主流浏览器均可使用。

Answer 3

这是一个jQuery解决方案-

演示（更新）

jQuery-

$(document).ready(function() {
  var w = parseInt($('#container').outerWidth()) - (parseInt($('#right').outerWidth()) + parseInt($('#left').outerWidth()));
  $('#in').css({
    border: '1px solid', //to override chrome's default- 2px inset
    width: w - 2
   });
});​

Answer 4

http://jsfiddle.net/thirtydot/fbVdp/

<div id="container">
    <div id="left">Left block</div>
    <div id="right">Some longer than 200px text</div>
    <span><input type="text" value="hello" /></span>
</div>

​#container span {
    display: block;
    overflow: hidden;
    border: 1px solid red;
}
#container span input {
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}​

#container {
  width: 100%;
}
#left {
  width: 200px;
  float: left;
  border: 1px solid black;
}
#right {
  min-width: 200px;
  float: right;
  border: 1px solid black;
}