如何在高度变化的图像下方放置div？

Question

在我的新网站中，我将图片设置为宽度100％，然后在其下方放置一些文字。如何根据图像的高度更改文本的位置？

HTML：

<div class = "pic">
    <img src="#"/>
</div>
<div class ="text">
    <h3>Some Important Message</h3>
</div>

CSS：

.pic{
    position:absolute;
    left:0;
    width:100%;
}
.pic img{
    position:absolute;
    width:100%;
}

.text{
    position:relative;
    margin-top:10px;
}

根据要求，这里是小提琴https://jsfiddle.net/sLx3n2vz/

Answer 1

请尝试：

删除所有css并仅添加

.pic{
    width:100%;
}
.pic img{
    width:100%;
}
.text{
    margin-top:10px;
}

DEMO

您定位HTML元素的方式是错误的。请更正。