定位低於IMG內容DIV只有div的

在一個頁面，我的工作我有一個包含不斷變化的圖像（與CSS）動畫一個div和它下面是內容的包裝的div，這樣的：定位低於IMG內容DIV只有div的

<div id="animation"> 
    <img ...> 
    ... 
    <img ...> 
</div> 
<div id="content"> 
    Some content 
</div>

我試過不同的方法：浮動，清除，位置，但我不能讓內容div留在它應該在動畫div下面 - 它重疊它。我發現部分工作的唯一解決方案是給第一個div的圖像高度（它們都具有相同的寬度和高度），但是當我這樣做時，它會在不同的分辨率下打破，或者使圖像的高度達到100％應用上述內容，但在不同的分辨率下，圖像看起來難以置信地很難看。

我該如何實現我的目標，最好只使用CSS？

編輯：JSFiddle

編輯2：我用this教程的變化的圖像。

來源

2013-07-05 Le Val

您可以向我們展示現場演示您的問題...... –

並請給你的CSS代碼（+的jsfiddle） – LinkinTED

完成，代碼是一樣的，在的jsfiddle除了圖像鏈接。我必須使用position：absolute來表示動畫的原因，並且必須是它爲什麼會破裂的原因，但是如果我不使用它，動畫將無法使用。 –

問題是，您已將頂部div中的所有內容設置爲position:absolute。這樣，頂部div不知道它需要多高（即它將是0px高）。
所以解決方案是有一個img沒有定位;那麼div就和這個img一樣高，內容div就會向下移動。

#cf4a img { 
    position: absolute; 
    left:0; top:0; 
    width: 100%; 
} 

#cf4a img:first-child { /* one non-positioned child */ 
    position: static; 
}

Updated fiddle

來源

2013-07-05 12:25:40

感謝您的回答。這解決了divs重疊的問題，但僅限於'正常'分辨率。如果我走高，例如1920x1080，由於高度發生變化，它們仍會重疊。有沒有解決方案？ –

jsfiddle網站現在似乎沒有加載，所以我無法檢查，但究竟是什麼問題？據我所知，圖像寬度僅爲100％，無論屏幕分辨率如何，它都會保持高寬比。或者內容div有什麼特殊的屬性，比如float的位置或者什麼？ –

啊，jsfiddle網站再次運作。現在，如果我F11我的瀏覽器，內容div仍然在最底層，當我滾下來，超過巨大的圖像。你看到別的東西了嗎？ –

-1

我還沒有看到你的代碼，所以我不能給出確切的解決方案。以下是我的解決方案，我希望它能爲你工作。

CSS：

#animation{ 
    width: 100%; 
    clear: both; 
} 
#content{ 
    width: 100%; 
    clear: both; 
}

HTML

如果您使用的是浮動離開圖像。那麼你應該在img標籤的末尾使用br標籤。

<br style="clear:both;">

來源

2013-07-05 13:19:14 aishazafar

-1用於推薦混合內聯樣式。 – Dom

定位低於IMG內容DIV只有div的

回答

相關問題