Question

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

Answer 1

更新： JSFiddle <!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd" > <suite name="Single Method Suite"> <test name="Single Method Test"> <classes> <class name="@CLASS@"> <methods> <include name=".*" /> </methods> </class> </classes> </test> </suite>已应用于您的代码。

https://jsfiddle.net/ec7qxtfr/1/

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

flexbox

下一位是您想要的.container { display: flex; flex-direction: column; justify-content: space-between; }填充。这将以容器内的第一个子元素为目标。

10px

只要第一个孩子.child:first-child { padding-bottom: 10px; }存在，即使您没有任何内容（没有段落），第二个div仍将被推到容器的底部，这要归功于div。同样，您可以注释掉flexbox属性，以验证两个子元素之间是否存在height。

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

https://jsfiddle.net/o3r40keu/5/

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

我希望这有帮助！

Answer 2

您可以使用flexbox。如果将容器设置为

.container-class {
  display: flex;
  flex-direction: column;
}

然后，您可以将孩子的边距设置为auto。

.child {
  margin-top: auto;
}

HTML可能如下所示：

 <section class="container-class">
   <p class="child">...</p>
 </section>

您可能需要在容器上设置一定的高度才能使其正常工作，但解决方案的要点是在要粘贴到底部的元素上使用flexbox + margin-top：auto。你想要实现的填充和其他样式应该按预期工作，没有技巧。

请注意，您需要在Flexbox道具前加上前缀，即：

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
  -ms-flex-direction: column;
      flex-direction: column;

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

2 个答案: