html - 将 parent 包裹在相对位置的 child 周围

Question

有没有办法让外层 div 将 2 个内层 div 紧紧包裹起来？即高度为 150px。

<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 的高度

Answer 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>