Question

我有两个DIV可能（两者）的大小不同。它们需要从父母框元素的相同（左上）位置开始，但是此（外部）框的高度应该与较大的内部元素相同。

当使用绝对定位（使元素重叠的常用方法）时，绝对定位的元素将从流中取出 - 并且不会影响外盒的高度：

HTML示例：

<div class="outer">
  <div class="inner1"></div>
  <div class="inner2"></div>
</div>
<div class="other">
  Subsequent content
</div>

CSS：

div.outer { position: relative }
div.outer div.inner1 { width: 200px; height: 150px; border: 1px solid green; position: absolute }
div.outer div.inner2 { width: 200px; height: 120px; background-color: yellow }

div.other { background-color: red }

小提琴：http://jsfiddle.net/L5qLrv4x/ - （我希望在两个内部DIV中较大的一个下面有红色DIV“其他”）

我不想使用JavaScript。是否有一个仅限CSS的解决方案，在同一位置有两个（可变高度）元素和将它们保留在流中以影响周围的内容？

谢谢！

使用案例

为什么有人需要这个？被访者可以在我的Web应用程序中粘贴屏幕截图。除非已粘贴，否则虚拟DIV表示可以粘贴屏幕截图的位置。这个假人也是contenteditable="true"来获取粘贴的内容。

当粘贴屏幕截图（可能具有与虚拟对象不同的纵横比）时，它将显示在（透明）虚拟对象后面的DIV中。虚拟必须保持在顶部以捕获进一步的粘贴事件 - 新的屏幕截图可能会替换首先粘贴的屏幕截图。

另一个表单输入位于此虚拟+预览框下方。当然，虚拟和屏幕截图都不应与此输入重叠。

正如我的用例所示，JavaScript是一个选项。我对仅使用CSS的解决方案的问题有两个原因：（a）纯粹的兴趣 - 我已经了解到，找到新的解决方案通常也有助于其他情况。（b）减少需要（额外）维护的JS代码。

Answer 1

您可以执行技巧，但此解决方案仅适用于您的问题。 它根本不是通用的。

诀窍是移动第二个div＆＃34;返回＆＃34;到第一个div位置。

＆＃13;

div.outer { 
  position: relative;
}

div.outer div.inner1 { 
  width: 200px; 
  height: 150px; 
  border: 1px solid green; 
  float:left;
}

div.outer div.inner2 { 
  width: 200px; 
  height: 120px; 
  background-color: yellow;
  transform:translateX(-100%);
  float:left;
}

div.outer div.inner2.higher {
  height:200px;
}

div.other { 
  background-color: red; 
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

＆＃13;

<h1>Div 1 is higher</h1>

<div class="outer cf">
  <div class="inner1"></div>
  <div class="inner2"></div>
</div>
<div class="other">
  Subsequent content
</div>

<hr />

<h1>Div 2 is higher</h1>

<div class="outer cf">
  <div class="inner1"></div>
  <div class="inner2 higher"></div>
</div>
<div class="other">
  Subsequent content
</div>

＆＃13;

Answer 2

这是你想要达到的目标吗？

以下是代码：

<强> CSS：

div.outer { position: relative }
div.outer div.inner1 { width: 200px; height: 150px; border: 1px solid green; position: absolute; display:block }
div.outer div.inner2 { width: 201px;height: 151px; background-color: yellow; display:block }

div.other { background-color: red; position:flex }

<强> HTML：

<div class="outer">
  <div class="inner1"></div>
  <div class="inner2"></div>
</div>
<div class="other">
  Subsequent content
</div>

<强>的jsfiddle： http://jsfiddle.net/L5qLrv4x/6/

两个DIV在同一位置 - 但不与其他内容重叠

2 个答案: