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

我有两个DIV可能（两者）的尺寸不同。他们需要从父母盒子元素的相同（左上角）位置开始，但此（外部）盒子的高度应该与内部元素中的较大者相同。位于同一位置的两个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 “其他” 下面的两个内部的大DIVs）

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

谢谢！

使用案例

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

粘贴屏幕截图（可能与虚拟模型的纵横比不同）时，它将显示在（透明）虚拟模型后面的DIV中。虚拟机必须保持在最前面才能捕获更多的粘贴事件 - 可能会替换先粘贴的新屏幕截图。

在此虚拟+预览框下方放置了一个附加表单输入。当然，假人和屏幕截图都不应该与此输入重叠。

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

来源

2015-12-02 BurninLeo

这样http://jsfiddle.net/L5qLrv4x/2/ –

@RohitAzad此解决方案仅适用如果'div' * A *是比'大div' * B * - 如果'div' * b *更大，那么结果将会不同。 – SidOfc

基本上，“不”......在某些时候不是没有JS。我承认，我不清楚这里的用例。为什么你不得不将内容分为顶部？你想达到什么目的？ –

你可以做一个招，但这种解决方案只是为你的问题。 它不是通用的。

诀窍是将第二个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>

来源

2015-12-02 10:09:27

呵呵 - 有趣的把戏。我玩过“位置：相对”，但没有来浮动+转换。如果“other”元素为“clear：both”，则表格元素的解决方法将变为废弃（http://jsfiddle.net/L5qLrv4x/5/）。鼓舞人心，谢谢！ – BurninLeo

我很高兴听到;）请将此答案标记为已接受，以便对其他人有所帮助。 –

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

这里是代码：

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/

来源

2015-12-02 10:05:45

实际上，我想在两个内部元素（与它们的高度无关）下面有“其他”内容。在此解决方案中，红色框位于“inner1”框内。 – BurninLeo

不起作用.. http://jsfiddle.net/L5qLrv4x/7/ –

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

回答

相关问题