css - HTML 相对位置和高度问题。

Question

我制作了一个需要此 HTML 内容的图像渐变器 javascript:

<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 图 的高度自动调整 #finder div 元素的高度，无需 javascript。是否可以？内容是流动的，所以图像是可以调整大小的，这就是为什么我想在没有 javascript 的情况下这样做的原因。

我用一个与其他图像具有相同高度的占位符图像解决了这个问题，但我认为这不是一个优雅的方法:)

谢谢

Answer 1

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

这样，相关的div会自动从#finder和#finder div中最高的元素获取高度。 jsFiddle 将你的 JS 代码放在里面会很有帮助。