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

Question

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

我想在一行中放置 3 个容器，其中左右具有固定宽度，中间一个是响应式的。里面有一个输入字段和提交按钮，其中输入字段是响应式的。示例：

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

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

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

我什至没有针对连续 3 个容器的解决方案，除了在中间容器上使用绝对位置 position: absolute; left: 200px; right: 200;。但这感觉是解决这个问题的错误方法。

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>