CSS将子容器的顶部与父容器的底部对齐:CSS Align top of child container to bottom of parent container

考虑此HTML

<div <a href="#">Parent</a> <div <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将子容器的顶部与父容器的底部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程技术网(www.editcode.net)！