css – 相对父DIV继承绝对子DIV的宽度

前端之家收集整理的这篇文章主要介绍了css – 相对父DIV继承绝对子DIV的宽度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图将一个孩子DIV放在父DIV的底部,但我也想让孩子DIV的内容帮助决定父DIV的尺寸.正如我现在所做的那样,子DIV不会影响父DIV的宽度/高度.

以下是我的HTML / CSS代码示例:

// HTML代码

<div id="parent">
    <h3>Top Aligned Title</h3>
    <div id="child"></div>
</div>

// CSS代码

#parent {
    background-color:#222;
    position: relative;
    height: 500px;
}
#child {
    background-color:#444;
    position: absolute;
    bottom: 0px;
    width: 100px;
    height: 200px;
}

我需要做什么才能实现我想做的事情?我可以放弃绝对/相对CSS规则,只需在父DIV中创建一个表,这将允许我实现底部对齐和指示父级维度的内容.

但是,我想知道是否有办法在CSS中执行此操作,而无需设置父DIV的宽度.

提前致谢!

解决方法

简短的回答是,你所要求的基本上不能用纯CSS / HTML来完成. (至少没有表)你需要Javascript来读取#child的宽度/高度,然后进行你想要做的计算(我不知道)并设置一个新的高度/宽度到#parent.

否则,如果你的意思是你希望#child的高度/宽度根据其内容而改变,当然这是原生CSS,只需将它的高度/宽度设置为auto,然后开始在其中添加文本,你会发现它将开始增长适合你的内容.

由于#child位于绝对位置,因此它取自文档的正常流量,因此不会影响#parent.

猜你在找的CSS相关文章