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

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 }

fiddle :http://jsfiddle.net/L5qLrv4x/ -(我希望红色 DIV“其他”位于两个内部 DIV 中较大的一个下方)

我不想使用 JavaScript。是否有仅 CSS 的解决方案可以在同一位置放置两个元素(高度可变)并让它们保持流动以影响周围的内容？

谢谢!

用例

为什么有人需要这个？受访者可以将屏幕截图粘贴到我的网络应用程序中。除非已粘贴，否则虚拟 DIV 表示可以粘贴屏幕截图的位置。此虚拟对象也是 contenteditable="true" 以获取粘贴的内容。

当屏幕截图被粘贴时(可能与虚拟对象有不同的宽高比)，它将显示在(透明)虚拟对象后面的 DIV 中。虚拟对象必须保持在顶部以捕获进一步的粘贴事件 - 新的屏幕截图可能会替换第一个粘贴的屏幕截图。

一个额外的表单输入被放置在这个虚拟+预览框的下方。当然，虚拟对象和屏幕截图都不应与此输入重叠。

正如我的用例所示，JavaScript 是一种选择。我对纯 CSS 解决方案的问题有两个原因:(a) 纯粹的兴趣——我了解到寻找新的解决方案通常在其他情况下也很有帮助。 (b) 需要(额外)维护的 JS 代码更少。

Answer 1

你可以做一个技巧，但是这个解决方案只是针对你的问题。 它一点也不通用。

诀窍是将第二个 div“返回”到第一个 div 位置。

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;
}

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