css - 如何将两个 div 彼此放置在父级的底部？

Question

In this example我能够将两个 div 放在它们父级的底部，但这只是因为我知道最后一个 div 的高度。第一个被移到了顶部。如果 #second 的高度是动态的怎么办？我们怎样才能让它们以动态高度在父级的底部彼此坐在一起？ css甚至有可能吗？请不要发布 JavaScript 或 jQuery 版本。

Answer 1

您可以使用Flexbox。使用 justify-content: flex-end ，您可以将内容移动到 parent 元素的末尾，因此如果您想将其他子元素放置在父元素之上，您可以使用margin-bottom: auto。这适用于在父级上设置 flex-direction: column 的情况。

.content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.main {
  margin-bottom: auto;
  border: 1px solid black;
}
.box {
  background: lightblue;
  margin: 5px;
}

<div class="content">
  <div class="main">Lorem ipsum dolor.</div>
  <div class="box">One</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati vel molestiae dolores, ad, nulla harum tenetur minima aperiam debitis id atque fugit, modi error et magni eius repellendus saepe. Vero?</div>
</div>