编程技术网

关注微信公众号,定时推送前沿、专业、深度的编程技术资料。

 找回密码
 立即注册

QQ登录

只需一步,快速开始

极客时间

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

ujos docker 2022-5-10 15:13 9人围观

腾讯云服务器
CSS将子容器的顶部与父容器的底部对齐的处理方法

考虑此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)!

腾讯云服务器 阿里云服务器
关注微信
^