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>

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

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

围绕位置相对孩子的父母包装

3 个答案: