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

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;
}