Div over image Bootstrap 3

Question

基于http://jsfiddle.net/evJRm/的片段(悬停图片 - 在它上面显示div)

问题是,当窗口调整大小时,文本和图像彼此分离(图像从新行开始).我该如何解决？

<div class="container">
    <div class='img-container'>
        <div class='img-text'>text</div>
        <img style='margin-top:10px;' width='150' height='225' src='http://img14.imageshack.us/img14/9698/29588166.jpg' />
    </div>
    <div class='img-container'>
        <div class='img-text'>text</div>
        <img style='margin-top:10px;' width='150' height='225' src='http://img14.imageshack.us/img14/9698/29588166.jpg' />
    </div>
    <div class='img-container'>
        <div class='img-text'>text</div>
        <img style='margin-top:10px;' width='150' height='225' src='http://img14.imageshack.us/img14/9698/29588166.jpg' />
    </div>
</div>

.img-container{
    width:150px;
    height:225px;
    position: relative;
    display: inline;
    margin:5px;
}
.img-text{
    top:20px;
    width:150px;
    height:50px;
    margin-left:15px;
    position: absolute;
    background-color: yellow;
    display:block;
}

jsfiddle:http://jsfiddle.net/w23ch/

Answer 1

您可以更改display: inline到display: inline-block的图像容器并相应地更新定位。

高度和宽度不会影响嵌入式元素，这使得很难获得正确的位置。

演示

.img-container{
    width:150px;
    height:225px;
    position: relative;
    display: inline-block;
    margin:5px;
}
.img-text{
    top:50%;
    width:150px;
    height:50px;
    margin-top: -25px;
    position: absolute;
    background-color: yellow;
    display:block;
}