Question

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

我的设计是响应式的所以我需要与flexbox相同的效果，我可以均匀地分隔元素，但我不知道该怎么做。

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

＆＃13;

#container{
  width: 500px;
  height: 700px;
  border: 1px solid #000;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.ele1, .ele2, .ele3{
  flex: 0 0 auto;
}

.ele1{
  height: 200px;
  background-color: red;
}
.ele2{
  height: 50px;
  background-color: blue;
}
.ele3{
  height: 100px;
  background-color: green;
}

＆＃13;

<div id="container">
  <div class="ele1"></div>
  <div class="ele2"></div>
  <div class="ele3"></div>
</div>

＆＃13;

如果没有flexbox，我该怎么做？

Answer 1

你可以使用Masonry这是一个纯JavaScript（它也支持jQuery），因为没有CSS等价物，如果你/不能使用flexbox。

Answer 2

以百分比形式使用margin-top和margin-bottom。分布大致取决于每个盒子的高度。我估计容器内总共有10％的垂直空间，包括填充和边框。这使得90％的容量分布在容器的内壁之间以及它们之间。

＆＃13;

#container{
  width: 500px;
  height: 700px;
  border: 1px solid #000;
  padding: 10px;
  /*display: flex;
  flex-direction: column;
  justify-content: space-around;*/
}

.ele1, .ele2, .ele3{
  /*flex: 0 0 auto;*/
  
}

.ele1{
  height: 200px;
  background-color: red;
  margin: 10% 0 15%;
}
.ele2{
  height: 50px;
  background-color: blue;
    margin: 25% 0 15%;
}
.ele3{
  height: 100px;
  background-color: green;
  margin: 25% 0 0;
}

＆＃13;

<div id="container">
  <div class="ele1"></div>
  <div class="ele2"></div>
  <div class="ele3"></div>
</div>

＆＃13;

Answer 3

我发现了一个弹性盒polyfil https://github.com/10up/flexibility

垂直均匀分布，无需flexbox

3 个答案: