元素未与底部完全对齐;略低于底边
Element not fully aligned with bottom; Slightly lower than bottom edge
当在具有相对位置规则的 div 中对元素使用绝对定位时,该元素略低于父元素 div 的底部。为什么会这样?我将如何解决这个问题?我意识到我可以 mod .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 的关注)
当在具有相对位置规则的 div 中对元素使用绝对定位时,该元素略低于父元素 div 的底部。为什么会这样?我将如何解决这个问题?我意识到我可以 mod .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 的关注)