Question

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

Answer 1

您可以为图片容器更改display: inline至display: inline-block，并相应地更新定位。

高度和宽度不会影响内联元素，这使得很难获得正确的定位。

DEMO

.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;
}

Div over image Bootstrap 3

1 个答案: