Html 如何使内部div边框扩展到外部div

我一直被这个HTML/CSS问题困扰着，我甚至不能开始弄清楚如何构造代码，我想知道是否有人可以帮助我。我并不真正需要代码，更需要一种方法和结构的想法

到目前为止，我有这个

+--------------------+
|       Outer div    |
|                    |
|                    |
|                    |
|+------------------+|
||  inner div       ||
||                  ||
|+------------------+|
+--------------------+

外部div没有样式，它只是一个容器。 内部div的周围有样式，给它一个边框和填充物，以推入其内容。 内部div的边框也与外部div内联，以上仅用于说明

当我单击内部div中的某个内容时，我希望内部div的边框展开并填充到顶部和外部div，如下所示：

+--------------------+
|+------------------+|
||    Outer div.    ||
||                  ||
||                  ||
||                  ||
||                  ||
||  inner div       ||
||                  ||
|+------------------+|
+--------------------+

内部div的垂直位置没有改变，但是它周围的边框被向上推到顶部，这样边框看起来就好像它现在是一个div一样围绕着外部div

我的一个想法是使边框成为一个绝对定位的div，可以在展开时将其

top

设置为0，在正常情况下将其设置为内部div的顶部，但由于它是

absolute

，我不知道如何使其

top

与布局中的内部div对齐

您将如何构建前后的html/css。触发因素目前并不重要

谢谢

更新：

• 外部div可以包含其他元素，可能是div本身
• 外部div没有固定的高度，它随所有内容一起增长

对于较旧的浏览器（不支持网格），这可能是一个解决方案（填充/位置值只是查看内容周围空间的示例）

.outer{
背景：黄色；
位置：相对位置；
填充：10px；
}
.内部{
位置：相对位置；
}
.内尔：以前{
内容：''；
边框：1px纯红；
位置：绝对位置；
底部：-10px；
左：-10px；
右：-10px；
顶部：-10px；
}
.内心：专注{
大纲：0；
位置：静态；
}
.内心：专注：之前{
排名：0；
左：0；
右：0；
底部：0；
背景：rgba（255,0,0,1）；
}

多洛坐在我身边

多洛坐在我身边

乱数假文。。。

嘿，谢谢@TWS，你的例子就是我正在寻找的行为。我在我的帖子中添加了一些澄清。这里重要的一点是，外部div将在内部div之前放置内容，内部div可以向下推动内容，但示例中的红色边框仍需要从内部div开始并展开以填充内容。很多感谢我已经根据灵活的内容高度更新了示例Hey TWS，非常感谢您的支持。这正是所需要的行为。可惜动画不是那么简单。我会到处玩，但会以此作为答案。非常感谢。