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 figure元素的高度而不使用javascript。可能吗？内容是流动的，因此图像可以调整大小，这就是我想在没有javascript的情况下执行此操作的原因。

我用占位符图像解决了问题，该图像与其他图像具有相同的高度，但我不认为它是优雅的方法：）

由于

Answer 1

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

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

HTML相对位置和高度问题。

1 个答案: