html - 三个流体 div，中心 div 包含一个表单输入

Question

尝试了各种方法让它工作，但我的最终结果从来没有像预期的那样。我在一个容器中有三个 div 来拉伸(stretch)屏幕的宽度，中间的 div 包含一个表单/输入。这个想法是在窗口调整大小时让中心 div 随表单调整大小。

<div style="width:100%;">
  <div style="width:33%; float:right">Contact|Twitter|Pintrest</div>
  <div style="width:33%; float:left;">Home|Blog|Fishing</div>
  <div style="margin-right:33%; float:left;"><form><input style="width:100%;"></form></div> 
</div>

这只是一个简单的例子来展示我的尝试。感谢任何帮助。

Answer 1

也将 width 设置为中心元素，请参见下面的示例代码(为了更好地阅读示例，我将您的内联样式放入 CSS):

<style>
    #left {background: #333; width: 33%; float: left;}
    #right {background: #666; width: 33%; float: right;}
    #center {background: red; float: none; width: 33%; margin: 0; display: inline-block;}
</style>

<div>
  <div id=right>Contact|Twitter|Pintrest</div>
  <div id=left>Home| Blog|Fishing</div>
  <div id=center><form><input style="width:100%;"></form></div> 
</div>

http://jsfiddle.net/qkpnxwpa/