将父级包裹在位置相对子级周围答案

【问题标题】：Wrapping parent around position relative child将父级包裹在位置相对子级周围
【发布时间】：2018-03-29 00:50:29
【问题描述】：

有没有办法让外部 div 紧紧地包裹 2 个内部 div？即高度为 150 像素。

<div>
    <div style="height:100px; background-color:#00cc00;"></div>
    <div style="height:100px; background-color:#cc0000; position:relative; top:-50px;"></div>
</div>

https://jsfiddle.net/44wsagv7/6/

在我的实际应用中，内部 div 的高度是可变的，因此固定外部 div 的高度不是一种选择

【问题讨论】：

详细说明一下。
你试过设置外层div的高度为150px吗？
啊，应该说，在我的实际应用中，内部div是可变高度的，所以固定外部div的高度不是一个选项。
使用 min-height:150px 如果高度增加它会自动调整

标签： html css

【解决方案1】：

您可以在第二个内部 div 中添加一些负下边距。

position:relative;
top: -50px;
margin-bottom: -50px;

并将其添加到外部 div 以避免边距折叠。

overflow: hidden;

<div style="background-color: #000000; overflow: hidden;">
  <div style="height:100px; background-color: #00cc00;">
  </div>
  <div style="height:100px; background-color: #cc0000; position:relative; top: -50px; margin-bottom: -50px">
  </div>
</div>

您可能只能使用负上边距来实现相同的布局。

margin-top: -50px;

<div style="background-color: #000000;">
  <div style="height:100px; background-color: #00cc00;">
  </div>
  <div style="height:100px; background-color: #cc0000; margin-top: -50px;">
  </div>
</div>

【讨论】：

【解决方案2】：

如果您希望外部 div 具有特定大小（例如 150 像素），只需给外部 div 一个固定高度。

<div style="height:150px">
  <div style="height:100px; background-color: #00cc00;">
  </div>
  <div style="height:100px; background-color: #cc0000; position:relative; top: -50px;">
  </div>
</div>

【讨论】：

【解决方案3】：

将高度添加到父 div，它会解决。你底部多余空间的问题。

<div style='height:150px;'>
<div style="height:100px; background-color: #00cc00;">
</div>
<div style="height:100px; background-color: #cc0000; position:relative; top: -50px;">
</div>
</div>

【讨论】：