调整div块与左右边界等距离

Question

我有 n 个div块的数量，它们之间必须是等距的。我正在尝试这个，但失败了display: inline-block;。有人可以帮我告诉我为什么失败吗？解决方案不得对像素进行硬约束，并且在不使用硬编码宽度或高度的情况下应该是动态的。

* {
  margin: 0px;
  padding: 0px;
}
body {
  background: #ddf;
}
.center {
  text-align: center;
}
.sectioncontainer {
  padding: 10px;
  background: yellow;
}
.sec1 {
  display: inline-block;
  border: 2px solid black;
  background: pink;
}
.sec2 {
  display: inline-block;
  border: 2px solid black;
  background: orange;
}
.sec3 {
  display: inline-block;
  border: 2px solid black;
  background: green;
}

<div class="sectioncontainer">
  <section class="sec1">
    aaa
  </section>
  <section class="sec2">
    bbb
  </section>
  <section class="sec3">
    ccc
  </section>
</div>

JS-FIDDLE：

https://jsfiddle.net/g89d38wf/

Answer 1

只需将display的{​​{1}}设置为flex

即可

sectioncontainer

要均匀地分配容器中的项目，.sectioncontainer { display: flex; justify-content: space-between; } 为justify-content。查看文档here。

  

CSS space-between属性定义浏览器如何沿其容器主轴在Flex项目之间和周围分配空间。

This link可以帮助您更深入地了解这一点。