Html CSS：具有重叠子div的父div-can'；我没有弄对父母的身高

我正试图消除

#中间面板

中

.box标签

文本下方的多余空间，但我需要保持

#中间面板

的功能，当屏幕尺寸变小，文本堆叠时，该面板会展开。但是，如果我在

#中间面板上设置了特定的高度以消除多余的空间，它将不再扩展以容纳堆叠类型

这把小提琴显示了我当前的实现：

如果在小提琴中添加高度：65px

到

#中间面板内部div

，您将看到文本下方所需的空间量。不幸的是，如果您随后将

类的
宽度：
从25%更改为20%（表示在较小屏幕尺寸下发生的情况），您将看到文本堆叠，但
中间面板无法扩展以容纳它。删除刚刚添加的高度：65px您将看到
#中间面板现在已展开以容纳文本，但底部空间再次过大

我尝试过一些解决方案，例如：
但它们似乎都不起作用

如有任何建议，将不胜感激
 发生这种情况是因为高度是
auto
，父div展开高度取决于子div。所以它取它的子div高度。即使您给出了负值
top
值

此问题的解决方案是，删除负的
顶部
值，并将
页边顶部
赋予
。红色框和标签

移除
顶部：-30px来自
#中间面板内分区
。以及：

.red-box-and-label {
    margin: -30px 0 0;
    padding: 0;
    width: 25%;
}

通常情况下，您需要为
#中间面板内分区
配备一个内包装，底部为负
边距
，以补偿您向上移动盒子时产生的
30px
。但如果放置它，则必须将所有
flex
属性从
#中间面板内部div
移动到内部包装器。因此，只需为它做一个外包装就更容易了，移动
顶部：-30px；位置：相对于它，并将
页边距底部：-30px
添加到
#中间面板内部div

这是你的名片

请注意标记和相关CSS代码中的更改：

.aWrapper {
  top: -30px;
  position: relative;
}
#middle-panel-inner-div {
  /* top: -30px */
  /* position: relative */
  margin: 0 auto -30px;
}

当我们使用较小的屏幕尺寸时，幸运的是，您使用固定的600px宽度作为#main…我只使用固定宽度作为小提琴，因为宽度设置不会导致问题。实际上，我对面板和主面板使用100%的宽度（加上媒体查询等）。抱歉搞混了。这很有效！你能帮我理解为什么
margin:-30px0上的code>和标签
起作用，但将此边距赋予
#中间面板内分区
则不起作用。相对位置在页面布局中占据空间，即使它显示
top:-30px。在页边距中，内容和空间都向右移动，但是如果我从
#中间面板内部div
中删除
位置：relative
，并为其提供负的顶部页边距（
页边距：-30px 0
，而不是
顶部：-30
），而不是将该页边距设置设置为
。红色框和标签
，则会忽略负的页边距。一旦我从
#中间面板内部div
中删除了
位置：相对
，它还有什么不同之处，它的行为/呈现方式与
不同。红色框和标签
，也就是说，它没有向上移动30px？@eggroll负上边距是有效的，如果您删除
位置：相对
，但由于没有给出位置，所以没有将对象从其位置移动。检查。使用firebug插件检查它。还要检查：谢谢，安德烈，这也很有效！由于ketan的解决方案非常简单，您是否可以想出一种可能使您的解决方案更适合我的方案？是的。他的解决方案通过在
#中间面板内部div
的内容上应用
-30px
边距来解决问题。如果该内容被包装，则所有行与上面行的距离都将缩短
30px
。我的解决方案将只在容器上应用边距，而不接触内容物。如果他们从来不包，你就没事了。太棒了！我的内容永远不会被包装，所以科坦的解决方案会起作用。但我问过，万一有什么我不知道的，比如你所描述的，这样当我确实需要这样的东西时（即我的内容是包装的），我就能够应用你的解决方案。谢谢你，安德烈！！一旦我有了名声，我一定会对你的回答投赞成票：-）