html - 将 3 个 div 对齐到另一个 div 中并垂直居中

Question

我有一个 div-container(蓝色)，我想在其中放置 3 个 div-element(红色)。

div-element 必须垂直对齐(我刚刚使用了 margin-top: 10%; )并且第一个必须左对齐，第二个居中和第三个在同一行。为此，我制作了 3 个 id#left、#center 和 #right。

然而，当我放入那些 id 时，一切都变得一团糟。第一个是对齐的，第二个是居中的，但是 margin-top: 10%; 没有' 不再影响它，第三个在右侧但在新行中。

我尝试将 display: inline-block; 放在我的 div-element 类中。这正确对齐了正确的元素，但弄乱了中心元素。

为什么会发生这种情况，我该如何解决？

很明显我试过了How to align 3 divs (left/center/right) inside another div?因为我使用了完全相同的 id，但是上面提到的解决方案在这里不起作用，我特别询问了为什么我的 margin-top: 10%; 在 .div-element 不影响中心 div

.div-container {
  width: 50%;
  height: 50%;
  background-color: blue;
}

.div-element {
  margin-top: 10%;
  width: 20%;
  height: 50%;
  background-color: red;
}

#center {
  margin: 0 auto;
}

#left {
  float: left;
}

#right {
  float: right;
}

<div class="div-container">
  <div class="div-element" id="left">Left</div>
  <div class="div-element" id="center">Center</div>
  <div class="div-element" id="right">Right</div>
</div>

Answer 1

我建议为此使用 flexbox:

.div-container {
  width: 50%;
  height: 50%;
  background-color: blue;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.div-element {
  margin-top: 10%;
  width: 20%;
  height: 50%;
  background-color: red;
}

<div class="div-container">
  <div class="div-element">Left</div>
  <div class="div-element">Center</div>
  <div class="div-element">Right</div>
</div>