如何使父div等于只有一个孩子的高度，忽略其他孩子?

Question

我有一个div，它有两个子元素，我想把其中一个放在父元素的外部，并且我想让父元素匹配另一个子元素的大小。我可以使用height: auto使其等于子结点的高度之和，但是如何使父结点的大小等于其中一个子结点的大小而忽略另一个子结点的高度呢?

<div style={width: auto; height: auto}>
<child1 style={height: 24px; width 24px; position: absolute ...}/>
<child2 style={height: 200px; width: 200px;}/>
<div>

Answer 1

如果你使用position: absolute从它的父容器中删除一个子容器，它也会从DOM中删除它，然后父容器只能根据仍然留在里面的子容器来引用它的高度。

Answer 2

很难理解你的问题的确切意图，但这是你的意思吗?

<div class="a">
<div class="b"></div>
<div class="c"></div>
<div>

div.a {
position: relative;
border: 1px solid skyblue;
}
div.b {
width: 100px;
height: 100px;
background: violet;
border: 3px solid blue;
}
div.c {
width: 200px;
height: 200px;
background: palegreen;
border: 3px solid blue;
position: absolute;
top: 30px;
left: 150px;
}

Answer 3

我不确定为什么绝对位置会影响父级高度的计算。我以为它会被忽略。

相反，我只是添加了一个margin-bottom: -24px来平衡第二个子元素。稍后会找到正确的解决方案，或者回来查看这里。我还想尝试快速摆弄，以验证在一个新鲜的环境中，绝对定位的孩子被忽略了。我想知道是否另一个css属性以某种方式与它交互。