設置項具有的所有可用空間寬度

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

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

Answer 2

你可以用另外的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 3

使用Flex-box：

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

Fiddle

作品中，除了IE所有主流瀏覽器 - Support table。

Answer 4

這裏是一個jQuery溶液 -

DEMO（更新）

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