底部的CSS定位没有绝对定位[关闭](CSS positioning at the bottom without absolute positioning [closed])

底部的CSS定位没有绝对定位[关闭](CSS positioning at the bottom without absolute positioning [closed])

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

How can I position an element so it is always on the bottom of the container without using 'absolute' positioning? I have a container containing 2 elements and one of them is text description so it can be as big as the text is. I would like to position second element at the bottom of the page regardless if the text in previous div is empty, and If text isn't empty I want to have padding of 10px between them

最满意答案

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

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

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

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

下一位是您想要的10px填充。 这将以容器内的第一个子元素为目标。

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

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

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

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

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

我希望这有帮助！

Updated: JSFiddle with flexbox applied to your code.

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

flexbox can help you achieve this. Add the following to your parent container.

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

The next bit is for the 10px padding you wanted. This will target the first child element inside the container.

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

As long as the first child div is present, even if you don't have any content (no paragraphs), the second div will still be pushed to the bottom of the container thanks to flexbox. Likewise, you can comment out the height property to verify that the padding is present between the two child elements.

Check out the JSFiddle below. You can adjust the height in the parent container to confirm that the second div stays at the bottom of the container.

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

Note: this solution will assume you will only have two child elements inside this particular parent container.

I hope this helps!