在不使用 flexbox 的情况下对齐项目的顶部和底部答案

【问题标题】：Align items top and bottom without using flexbox在不使用 flexbox 的情况下对齐项目的顶部和底部
【发布时间】：2019-07-02 06:29:34
【问题描述】：

一个盒子里有两个项目，我试图将第一个项目与盒子的顶部对齐，将最后一个项目与盒子的底部对齐。我知道我可以使用 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 的情况下，还有其他方法吗？

【问题讨论】：

世界在前进。为什么需要（一些旧的 html 到 pdf 生成器）？
比@Air 转发的更多 Old School，考虑将您的元素放置在相对父容器中吗？
@Air，您会发现很多时候，尽管开发人员可能是最前沿的，但他们必须在客户要求的范围内工作。有时，这些开发人员只知道现代技术，为了了解旧技术以满足他们的客户需求，必须来这里提问。只是供您考虑。
@Michael_B，我同意你的观点，但是需要向客户解释如何做得更好，以免与不知道布局是什么的客户一起去......我们需要解释一下，越远，就越难重写一切，将其移至新技术的水平......这是我个人的看法......客户总是对与错......）））
@Air，客户有时是一家大公司，强迫所有员工使用 IE11，甚至 IE9。开发人员只想工作，而不是彻底改变公司。

标签： javascript html css flexbox

【解决方案1】：

您可以使用相对位置和绝对位置来实现，如下所示。希望对您有所帮助。

.container > div {
    position: absolute;
    bottom: 0;
}
.container > div.top {
    bottom: inherit;
    top: 0;
}
.container {
  height: 150px;
  width: 100%;
  background-color: lime;
  position:relative;
}

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

【讨论】：

这里inherit的目的是什么？

【解决方案2】：

您可以使用 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>

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

【讨论】：

【解决方案3】：

考虑到元素将保持流入的表格，这是另一个想法：

.container {
  height: 150px;
  width: 100%;
  background-color: lime;
  display: table;
}
.container > div {
  display:table-row;
}
.container > div:first-child {
  height:100%;
}

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

【讨论】：