Css 垂直均匀分布，无flexbox

我试图使我的网站IE9兼容，但我在很多地方使用flex Box，所以我需要一种替代方法来均匀间隔子元素

我的设计反应灵敏，所以我需要与flexbox相同的效果，在那里我可以均匀地分隔元素，但我不确定如何做到这一点

下面是一个片段，展示我如何在布局中使用flexbox

#容器{
宽度：500px；
高度：700px；
边框：1px实心#000；
填充：10px；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
}
.ele1、.ele2、.ele3{
flex:0自动；
}
.ele1{
高度：200px；
背景色：红色；
}
.ele2{
高度：50px；
背景颜色：蓝色；
}
.ele3{
高度：100px；
背景颜色：绿色；
}

---

您可以使用纯JavaScript（它也支持jQuery），因为如果您使用/不能使用

flexbox

则可以使用

页边距顶部

和

页边距底部

。分布大致取决于每个盒子的高度。我估计容器内总共有10%的垂直空间，包括填充物和边框。剩下的90%将分布在容器内壁和容器之间

#容器{
宽度：500px；
高度：700px；
边框：1px实心#000；
填充：10px；
/*显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间*/
}
.ele1、.ele2、.ele3{
/*flex:0自动*/
}
.ele1{
高度：200px；
背景色：红色；
利润率：10%0.15%；
}
.ele2{
高度：50px；
背景颜色：蓝色；
利润率：25%015%；
}
.ele3{
高度：100px；
背景颜色：绿色；
利润率：25%0；
}

我发现了一个flex box polyfil

她/他想改变整个设计，而不是简单的布局，我相信提供的片段只是一个例子：因此我需要一种均匀间隔子元素的替代方法。但是要求对整个设计进行修改会是一个更好的问题，因为固定尺寸会严重阻碍响应。我也尝试过这种方法，但裕度不会相应地调整。它只适用于固定的布局，如果布局是固定的，我就可以使用固定的数值作为位置。我是不是误解了什么？要真正做出反应，你需要使用相对长度（当然不是所有的长度）和媒体查询。首先从移动方面开始，然后进入桌面。flexbox是否有任何masonary回退/polyfill？所以我只能在IE8/9上有条件地加载一个js文件，这样我就可以处理flex了？我看了看，但找不到，所以我有点犹豫该怎么办。我检查了我的分析，我8.2%的流量都在IE8上，所以我需要做点什么。