响应式搜索字段布局，同时避免绝对位置

Question

我有这个特定的布局问题。

我希望在一行中获得3个容器，其中左侧和右侧具有固定宽度，中间一个具有响应性。在里面有一个输入字段和提交按钮，其中输入字段是响应字段。例如：

我尝试做的是使用div-wrapper，它包含用于输入的填充和假造型。然后在这个包装器中有width: 100%;输入字段。可悲的是，无论我怎么努力，我的方法都不起作用：

＆＃13;

＆＃13;

#general_before {display: inline-block; background: rgba(34, 43, 34, 0.5); width: 100px;}
#general_wrapper {display: inline-block; width: 100%; border: 2px solid black;}
#field_wrapper {padding: 5px; background: rgba(45, 65, 78, 0.5);}
#field {width: 100%;}
#submit {float: right;}
#general_after {display: inline-block; background: rgba(45, 87, 56, 0.5); width: 100px;}

＆＃13;

<div id="general_before">BEFORE</div>
<div id="general_wrapper">
<input id="submit" type="submit" value="GO" />
<div id="field_wrapper"><input id="field" type="text" name="" placeholder="Enter your search term here.." value="" /></div>
</div>
<div id="general_after">AFTER</div>

＆＃13;

＆＃13;

＆＃13;

除了在中间容器上使用位置绝对position: absolute; left: 200px; right: 200;之外，我甚至连续都没有3个容器的解决方案。但这对于这个问题感觉不对。

Answer 1

尝试Flexboxes：

#container, #general_wrapper {display: flex;}
#general_wrapper, #field_wrapper {flex-grow: 1;}
#field { width: 100%;}

<div id="general_before">BEFORE</div>
<div id="general_wrapper">
<input id="submit" type="submit" value="GO" />
<div id="field_wrapper"><input id="field" type="text" name="" placeholder="Enter your search term here.." value="" /></div>
</div>
<div id="general_after">AFTER</div>

IE支持的更新

#container , #general_wrapper { display: table; width: 100%;}
#general_before, #general_after, #submit, #field_wrapper { display: table-cell;}

#field_wrapper, #field_wrapper input  { width: 100%;}
#general_before, #general_after, #submit {width: 100px;}

<div id="general_before">BEFORE</div>
<div id="general_wrapper">
<input id="submit" type="submit" value="GO" />
<div id="field_wrapper"><input id="field" type="text" name="" placeholder="Enter your search term here.." value="" /></div>
</div>
<div id="general_after">AFTER</div>