javascript - 在不使用 flexbox 的情况下将元素顶部和底部对齐

Question

一个盒子里有两个元素，我试图将第一个元素对齐到盒子的顶部，将最后一个元素对齐到盒子的底部。我知道我可以使用 flexbox 轻松做到这一点:

.container {
  height: 150px;
  width: 100%;
  background-color: lime;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<div class="container">
  <div>Top text</div>
  <div>Bottom text</div>
</div>

不幸的是，我使用的平台(一些旧的 html 到 pdf 生成器)不支持 flexbox。有没有不使用 flexbox 的另一种方法？

Answer 1

您可以使用 CSS 定位属性。

.container {
  position: relative;
  height: 150px;
  width: 100%;
  background-color: lime;
}

.container > div {
  position: absolute;
}

.container > div:first-child {
  top: 0; /* optional */
}

.container > div:last-child {
  bottom: 0;
}

<div class="container">
  <div>Top text</div>
  <div>Bottom text</div>
</div>

请注意绝对定位元素已从文档流中移除。这意味着它们不考虑周围元素占用的空间，这可能会导致重叠。