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类中。这样可以正确对齐右侧元素，但会弄乱中间的元素。

为什么会这样，我该如何解决？

很明显，由于我使用了完全相同的id，所以我尝试了How to align 3 divs (left/center/right) inside another div?，但是上述解决方案在这里不起作用，我特别问为什么我的{{1} margin-top: 10%;中的}不会影响中心div

.div-element

.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;
}

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>

Answer 2

对我来说，最简单的方法之一就是使用CSS网格定位列

 <style>
       .div-container {
      display:grid;
      grid-template-column: 3, 1fr;
       width: 50%;
      }
   </style>

将3个div对准另一个div并垂直居中

2 个答案: