位於同一位置的兩個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 - 但不會與其他內容重疊

回答

相關問題