CSS定位在底部，没有绝对定位

Question

如何定位元素，使其始终位于容器的底部而不使用“绝对”定位？我有一个包含2个元素的容器，其中之一是文本描述，因此它可以与文本一样大。我想将第二个元素放置在页面底部，而不管上一个div中的文本是否为空，如果文本不为空，我想在它们之间填充10px

Answer 1

更新： JSFiddle已flexbox应用于您的代码。

flexbox可以帮助您实现这一目标。将以下内容添加到您的父容器中。

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

接下来的一点是10px您想要的填充。这将针对容器内的第一个子元素。

.child:first-child {
  padding-bottom: 10px;
}

只要第一个孩子div在场，即使您没有任何内容（无段落），由于，第二个孩子div仍然会被推到容器的底部flexbox。同样，您可以注释掉height属性以验证padding两个子元素之间是否存在。

查看下面的JSFiddle。您可以调整父容器中的高度，以确认第二个div停留在容器的底部。

注意：此解决方案将假定您在此特定的父容器内只有两个子元素。

我希望这有帮助！