html – Div over image Bootstrap 3

发布时间：2020-12-14 22:53:36 所属栏目：资源来源：网络整理

导读：基于http://jsfiddle.net/evJRm/(Hover image display div over it)的片段问题是,当窗口调整大小时,文本和图像彼此分离(图像从新行开始).我该如何解决？ jsfiddle：http://jsfiddle.net/w23ch/ 最佳答案您可以更改display：inline to display：图像容器的i

基于http://jsfiddle.net/evJRm/(Hover image – display div over it)的片段

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


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


最佳答案
您可以更改display：inline to 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;
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!