HTML相對位置和高度問題。

Question

我做了一個形象的JavaScript推子這需要這個HTML內容：

<div id="finder" class="clearfix"> 
    <div class="clearfix"> 
    <figure> 
     <h1>Asd</h1> 
     <h2>Asd</h2> 
     <h3>Asd</h3> 
     <img src="images/sample-image.jpg" /> 
    </figure> 
    <figure> 
     <h1>Asd2</h1> 
     <h2>Asd2</h2> 
     <h3>Asd2</h3> 
     <img src="images/sample-image-2.jpg" /> 
    </figure> 
    <figure> 
     <h1>Asd3</h1> 
     <h2>Asd3</h2> 
     <h3>Asd3</h3> 
     <img src="images/sample-image-3.jpg" /> 
    </figure> 
    <p>some text</p>   
    </div> 
</div> 

的CSS：

#finder div {margin: 0; padding: 0; position: relative;} 
#finder figure {position: absolute; margin: 0;} 
#finder figure img {width: 980px;} 
#finder figure h1 {position: absolute;} 
#finder figure h2 {position: absolute;} 
#finder figure h3 {position: absolute;} 

我想自動高度基於當前#finder div figure「的#finder div元素沒有JavaScript的高度。可能嗎？內容是流暢的，所以圖像的大小可調整，這就是爲什麼我想這樣做沒有JavaScript的原因。

我解決了與具有相同高度的其他圖像佔位符圖像的問題，但我不認爲它優雅的方法:)

感謝

Answer 1

#finder, 
#finder div { overflow: hidden; } 

這樣，相關divs會自動從#finder和#finder div以內的最高元素中獲取高度。 js在你的JS代碼中找到很多幫助。