html - 将标题设置为始终从照片的左下角开始

Question

我有照片说明。当浏览器不是时它工作得很好 比照片尺寸大。当它变大时，照片在 中心。我不知道如何让标题始终从照片的左下角开始。

HTML

<div>
<img id="pht" src="http://farm4.static.flickr.com/3065/2741653860_468fda7e7a.jpg">
    <span id="cap">Photo Caption</span>

    </div>

CSS

#pht{
position:relative;
    display: block;
margin-left: auto;
margin-right: auto;

}
#cap{position:absolute;
  background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;

    color: yellow;
    display: inline-block;
    font: bold 13px/30px Helvetica,sans-serif;
    letter-spacing: -1px;
    padding-left: 5pt;
    padding-right: 5pt;   
}

fiddle :http://jsfiddle.net/qpxkypn8/

Answer 1

试试这个..

HTML

<div>
    <div id="dpht"><img id="pht" src="http://farm4.static.flickr.com/3065/2741653860_468fda7e7a.jpg"></div>
    <span id="cap">Photo Caption</span>
</div>

CSS

div{
    max-width: 500px;
    margin: 0 auto;
}
#dpht{
    display: flex;
    flex-direction: row;
}
#pht{
    display: block;
}
#cap{
    flex: none;
  background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;

    color: yellow;
    display: inline-block;
    font: bold 13px/30px Helvetica,sans-serif;
    letter-spacing: -1px;
    padding-left: 5pt;
    padding-right: 5pt;   
}

看看这个 Fiddle