CSS部门尊重其他部门

我想让DIV响应。我有三个部门：

LEFT | MIDDLE | RIGHT

因为这是一个移动网站，我必须能够尊重屏幕大小。因此，我想调整

中间的
div（其中包含
输入
）的大小，而不是其他的

下面是JSFIDLE：

如果抓取JSFIDLE分隔符并向右推，右侧的图像将下降到另一行。
我想保持两个图像在其两侧，并调整中间div的大小

另外，我希望
中间div
是全宽的，这意味着它在的
图像左
和
图像右
之间只有一个空格（比如
20px
）

我如何才能做到这一点？
这应该是解决方案：

@media only screen and (max-width: 600px) {
    div.header .middle{
       width: 40%;
    }
}

JSFiddle：
使用
@media-only屏幕和（最大宽度：600px）{
可以设置css，当屏幕小于600px时，可以使中间的大小变小

正如您所要求的，只有
.middle
div更改其宽度，而
.left
和
.right
具有固定的宽度。我使用了
calc（）
函数，因此此示例将适用于所有现代浏览器（无论如何不适用于
IE<9
或
Safari<6
）。div是浮动的，因此您可能需要对父元素应用清除

相关CSS

.header * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.header div { 
  float: left;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background: #c0d6c3;
}

.left, .right {
  width: 50px; // fixed width
}

.middle {
  width: -webkit-calc(100% - 100px);
  width: -moz-calc(100% - 100px);
  width: calc(100% - 100px);
}

/* 96% so you have a small space between images */
input { width: 96%; }