正如标题所说
我的代码是这样的:
<div class=container> <img/> <div>some text with line one, line two , line three </div> </div>
容器应该有溢出:隐藏,我的文本将超过一行,所以我只需要一小部分文本出现在容器的底部,所以当用户悬停时,完整的文本会出现。
我想将文本放置在 img 上而不使用绝对定位。
我尝试了负边距,但文本那里没有 BG 颜色。
还尝试了相对位置。 => 效果很好,但在 IE 上效果不佳。
here is an image of what I want
我认为没有理由不使用position: absolute
.
See: http://jsfiddle.net/NeaR4/
CSS:
.container {
border: 2px dashed #444;
float: left;
position: relative
}
.container img {
display: block
}
.container > div {
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 14px;
background: #000;
background: rgba(0,0,0,0.7);
color: #fff;
overflow: hidden;
font: bold 14px Arial, sans-serif;
padding: 5px;
}
.container:hover > div {
height: auto
}
HTML:
<div class="container">
<img src="http://dummyimage.com/230x180/f0f/fff" />
<div>some text with line oneeee, line twoooooooo ooooooo , line three</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)