如何在絕對定位的圖像之後保留內容流？

Question

奇怪的是，當我搜索這個問題時，我找不到任何東西。

我有一堆圖像堆疊在一起（不垂直），使用position: absolute。

所以HTML基本上是這樣的：

<div class="image-gallery"> 
    <img src="whatever.jpg"> 
    <img src="whatever2.jpg" class="hidden"> 
    <img src="whatever3.jpg" class="hidden"> 
</div> 

而CSS，使他們既堆棧，並responive但保留其長寬比：

.image-gallery { 
    width: 100%; 
    height: auto; 
    margin: 0 auto; 
    position: relative; 
} 

.image-gallery img { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: auto; 
} 

所有的工作很好，但問題是這個畫廊之後的內容。它位於它的頂部，因爲就HTML而言，圖像不佔用任何空間。

是否有一個簡單的CSS修復來保存內容流，還是必須使用JavaScript調整大小函數或其他東西來將包含div的height設置爲width的一小部分？

的jsfiddle這裏：http://jsfiddle.net/01xoet16/

Answer 1

除了昆汀的很好的解釋。我在此建議一種解決方法。所以看起來你可以讓一個圖像不是絕對的，所以這個空間總是被保留下來的，如果需要的話可以使用z-index。

該解決方案僅適用於所有圖像尺寸相同的情況。

http://jsfiddle.net/01xoet16/3/

.image-gallery img { 
    width: 100%; 
    height: auto; 
} 
.image-gallery img.hidden { 
    position: absolute; 
    left: 0; 
    top: 0; 
} 

與z-index附加控制。

http://jsfiddle.net/01xoet16/4/

.image-gallery img:not(.hidden) { 
    width: 100%; 
    height: auto; 
    position: relative; 
    z-index: 1; 
} 
.image-gallery img.hidden { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: auto; 
} 

Answer 2

有一個簡單的CSS修復保存內容流

號絕對定位將刪除從正常流動的內容。這樣的內容不能影響其他（非後代）元素的位置。

還是必須使用JavaScript調整大小函數或其他東西來將包含div的高度設置爲寬度的一部分？

這或知道什麼尺寸的圖像將在首位。

或者，可以考慮通過切換其display屬性（使其在正常流程中可見時）而不是絕對定位它們來隱藏圖像。