Html 如何将三个部分放在同一条线上，两个固定宽度和一个响应宽度

我试图在同一水平线上有3列： 一个漂浮在左边，一个漂浮在右边，一个漂浮在中间。 左边和右边的应该有一个固定的宽度，比如说300px，中间的应该是响应的。所有三个部分之间都应该有一个只有几像素的填充，也就是说中间部分应该自动填充剩余的空间。。我正在尝试调整我在网上的代码以适应我的项目

  <div class="main">
       <div class="left" > Left fixed width </div>
       <div class="middle">Middle responsive width </div>
       <div class="right">Right fixed width </div>
  </div>

我还希望所有这些（主包装器）水平居中于页面中间，垂直居中于主包装器中间。。 在断点540px处；我将决定在左侧和右侧div中将显示设置为无

是否有一种方法可以让中间内容自动填充

有人能帮帮我吗？？ 提前谢谢。

---

Michelle

实现这一点的一种方法是更改HTML元素的顺序，并将两列浮动到两侧。如果中间列在HTML中的最后一列，它将填充可用空间

如果盒子太窄，我建议在较小的设备上使用覆盖浮动和宽度的方法，将它们垂直堆叠在特定宽度以下

div{
文本对齐：居中；
}
左边
.对{
宽度：200px；
高度：240px；
}
.左{
浮动：左；
背景颜色：浅蓝色；
}
.对{
浮动：对；
背景颜色：浅绿色；
}
.中{
高度：200px；
背景颜色：粉红色；
}
@介质（最大宽度：540像素）{
左边
.对{
浮动：无；
宽度：自动；
}
}

左固定宽度
右固定宽度
中等响应宽度

使用flexbox CSS

.main{
宽度：100%；
显示：-webkit flex；
显示器：flex；
}
.主分区{
背景：#2db34a；
边框：1px纯黑；
保证金：3倍；
}
.左，.右{
最小宽度：300px；
最大宽度：300px；
}
.中{
-webkit-flex-grow:1；
柔性生长：1；
}

左固定宽度
中等响应宽度
右固定宽度

这应该可以让您开始。一个很好的提示。几乎把我带到了那里，但当它破裂时，比如说在420px左右，中间的浅绿色容器表现得很滑稽。如果在这个休息品脱，中间的容器可以低于左和右的，那将是可怕的。我试图改变显示器，但没有成功@showdevOh，我错过了你的要求，在元素之间留有一些余量。Flexbox可能是更有效的方法。

    .main{display:inline}
     div {background: #2db34a;
          display: inline-block;   
          text-align: center; }

      .left{width:200px;height:240px}
      .right{width:200px;height:240px}
      .middle{width:60%;height:200px;}