Question

我有几个图像在div中彼此相邻放置，如下所示：

<div id='images'>
    <div class="iphoneimage">
        <img src="img1.jpg" height="300">
        <h5 class="size">1363 x 2048</h5>
    </div>

    <div class="iphoneimage">
        <img src="img1.jpg" height="300">
        <h5 class="size">1363 x 2048</h5>
    </div>
</div>

使用以下css设置样式：

.iphoneimage {
    overflow: auto;
    width: 169px;
    float: left;
}
img {
    position: relative;
}
h5.size { 
    position: absolute; 
    top: 200px; 
    left: 20px; 
    width: 100%; 
}

我试图让文字显示在每张图片的顶部，但目前只有一组文字显示在第一张图片上。

Answer 1

尝试将position:relative添加到div .iphoneimage

.iphoneimage {
    overflow: auto;
    width: 169px;
    float: left;
    position:relative;
}

Fiddle

Answer 2

.iphoneimage {
    overflow: auto;
    width: 169px;
    float: left;
    position:relative;
}
img {
    position: relative;
}
h5.size { 
    position: absolute; 
    top: 200px; 
    left: 20px; 
    width: 100%; 
}

<div id='images'>
    <div class="iphoneimage">
        <img src="img1.jpg" height="300">
        <h5 class="size">1363 x 2048</h5>
    </div>

    <div class="iphoneimage">
        <img src="img1.jpg" height="300">
        <h5 class="size">1363 x 2048</h5>
    </div>
</div>

多个内嵌图像，每个上面都有浮动文本

2 个答案: