元素未与底部完全对齐;略低于底边

时间:2015-01-14 18:21:31

标签: html css position

在具有相对位置规则的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>
&#13;
&#13;
&#13;

http://jsfiddle.net/pcwhmft6/1/

1 个答案:

答案 0 :(得分:2)

vertical-align: top;

上添加img
#avatar {
    vertical-align: top;
}

http://jsfiddle.net/pcwhmft6/2/

或将您的图片设置为display: block(感谢@Justin Breiland注意)