Question

尝试了各种方法来实现这一点，但我的最终结果却从未像预期的那样。我在容器中有三个div来拉伸屏幕的宽度，中心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/

Answer 2

你可以用position：absolute来做到这一点。这样做的好处是你可以在每个部分内使用绝对位置。 CSS看起来像这样

section{
  width:calc(100% / 3);
  height:100%;
  box-sizing:border-box;
  position:absolute;
  top:0;
}
#left{
  left:0;
  background-color:red;
}
#center{
  left:calc(100% / 3);
  background-color:blue;
}
#right{
  left:calc(100% / 3 * 2);
  background-color:green;
}

使用box-sizing：border-box意味着您可以为每个元素添加边框而不会弄乱对齐。

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

2 个答案: