Html 简单的3列响应式布局

我有一个简单的三列布局，我似乎无法得到工作。这对你们中的大多数人来说可能非常容易，但由于某些原因，我无法让它工作

<div>min-width</div><div>stay in center</div><div>min-width</div>

最小宽度保持在中心最小宽度

这是JSFIDLE-

小提琴看起来像垃圾，但基本上左/右列的大小应该缩小到最小宽度，然后开始缩小中间，所有容器之间的间距应该保持30 px…现在当它达到最小宽度时，随着浏览器窗口的大小调整，第二个/中间容器移动到第一个容器上，我需要盒子保持原样，只是不断变小…就好像两边都要在中间的容器上弄脏一样

---

试着用css来做到这一点，所以如果可能的话，没有第三方做任何事情，我知道完美的三列布局和bootsrap，但我觉得必须有一个纯css解决方案来解决这个问题

CSS中存在一些语法问题，例如

display:float:left不会做任何事情。此外，您不能以百分比定义固定的边距和宽度，因为您不知道屏幕上是否还有那么多空间

这是您想要的结果吗？
我建议您使用css
display:table
和
display:table cell
，这两种格式的使用率普遍较低。这是您正在使用的简化小提琴：

HTML:

这确实允许您在
%
中使用宽度。对于错误的代码，非常抱歉。。。我想要的是最左边和最右边的列变小，从10%到最小宽度，因为它们都是重要信息的导航，所以我不希望它们变得太小…所以我认为左边的一个应该是左浮动的，最后一个容器应该是右浮动的，所以它们总是在屏幕的左边和右边…然后中间只是填满了中间的东西…现在如果你在最后一个容器上放上float，中间并没有填满右边的空间，我试图更好地澄清…所以基本上，左边和右边的列应该一直保持在屏幕上，中间的容器就是它们之间剩下的任何空间…然后我可以在屏幕上放一个最小宽度整体网站容器，所以在中间的信息不是太小，但这是我需要的布局，希望这使更多的SESESEI把一个最小宽度的一和三，它的工作！两列都变小到最小宽度，中间的容器分别填充其余的空间！我知道这很简单。非常感谢。如何使用
table
和
table cell
保持固定的边距？我不知道这是否是您所说的@prtksxna，但当我开始在以css表格的方式构建的div中及其周围放置大量内容时，使用边距或填充几乎不可能移动对象…我想知道这是否是您在上面提到的，因为css表格几乎不可能在没有“上/左”的情况下移动对象，我听说这不好用，因为使用相对定位会扰乱文档流。任何信息，谢谢！
<div class="container">
    <div class="one">
        <div>one</div>
    </div>
    <div class="two">
        <div>two</div>
    </div>
    <div class="three">
        <div>three</div>
    </div>
</div>

html, body{height:100%;}

.container{
    width:100%;
    height:100%;
    display: table;
}
div > div {
  display: table-cell;
}
.one {width:15%; background:#ccc}
.two {width: 60%; background:#cba}
.three {width: 25%; background:#ca8}