我想实现一个棘手的页脚,如本 ,但如果我的内容比页脚短仍部分出现过倍。 我可以看到大约25像素,我必须向下滚动才能看到其余的像素。 这是相关的CSS: 我正在使用Chrome,但Safari中也存在此问题。 我尝试过不使用伪选择器,但是有类似的问题。 除了页脚,我所有的内容都包装 ...
提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供 中文繁体 英文版本 中英对照 版本,有任何建议请联系yoyou2525@163.com。
在具有相对位置规则的div内的元素上使用绝对定位时,该元素略低于父div的底部。 为什么会这样? 我该如何解决? 我意识到我可以修改.hoverAction的最低值,但这似乎更像是一种解决方法,而不是实际的解决方法。
function showFileUploadDialog() { //do stuff }
#avatarContainer { display: inline-block; position: relative; } .hoverAction { position: absolute; bottom: 0; background: rgba(0, 0, 0, 0.65); color: white; display: block; width: calc(100% - 12px); padding: 6px; } #avatar { width: 200px; height: 180px; background-size: cover; background-position: center; border-radius: 1px; background-color: #eeeeee; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46); display: inline-block; }
<div id="avatarContainer"> <a class="popup-link" href="{{ anime.poster }}"><img id="avatar" style="background-image: url('http://www.herdofsquirrels.com/wp-content/uploads/2014/08/squirrel-nut-cute-animal-nature-grass-1920x1280.jpg');" /></a> <a class="hoverAction" href="#" onclick="showFileUploadDialog(); return false;">Update Avatar</a> </div>
添加vertical-align: top;
顶你的img
#avatar {
vertical-align: top;
}
http://jsfiddle.net/pcwhmft6/2/
或将图像设置为display: block
(感谢@Justin Breiland引起注意)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.