Bootstrap 3中图片上方的Div

Question

Bootstrap 3中图片上方的Div

7

基于http://jsfiddle.net/evJRm/（Hover image - display div over it）的代码片段。

问题是，当窗口大小改变时，文本和图像会分开（图像会开始一个新行）。如何解决这个问题？

<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/

- Willem

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mathias · Accepted Answer

你可以将图像容器的 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;
}