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

只需按照以下方法使用相对和绝对位置即可。希望对您有帮助。

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

Answer 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>

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

Answer 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>

上下对齐项目，无需使用flexbox

3 个答案: