Question

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

Answer 1

您可以使用Flexbox。使用justify-content: flex-end，您可以将内容移至父元素的结尾，因此，如果您想将其他子元素放在父元素的顶部，则可以使用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>

Answer 2

你可以将它们包装在div中并为该div设置位置绝对样式，而不是单独应用它们。

工作[小提琴] [1]

[1]: https://jsfiddle.net/gd5pqky7/

如何在父母的底部将两个div放在一起？

2 个答案: