CSS将子容器的顶部与父容器的底部对齐 | CSS将子容器的顶部与父容器的底部对齐

本文介绍了CSS将子容器的顶部与父容器的底部对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

考虑此HTML

<div class="parent">
    <a href="#">Parent</a>
    <div class="child">
        <a href="#">Child</a>
    </div>
</div>

我想做的是将 child 的顶部放置在 parent 的底部.

What I want to do is position the top of child to the bottom of parent.

到目前为止，这是我的CSS:

Here's my CSS so far:

.parent {
    position: relative;
}

.child {
    position: absolute;
    left: 0;
    bottom: 0;
}

这是实现的:

我想要实现的是这样:

请注意::我不知道父容器或子容器的高度，也不想设置任意高度，也不想恢复使用JavaScript

Please note: I do not know the height of either the parent or child container, and don't really want to set an arbitrary height, and I don't want to revert to using JavaScript.

推荐答案

.parent {
    position: relative;
    background-color: #F00;
}

.child {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #00F;
}

这篇关于CSS将子容器的顶部与父容器的底部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！