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

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

#1楼 票数:2 已采纳

添加vertical-align: top; 顶你的img

#avatar {
    vertical-align: top;
}

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

或将图像设置为display: block (感谢@Justin Breiland引起注意)

  ask by Laplace translate from so

未解决问题?本站智能推荐:

2回复

如何使用 CSS 在屏幕底部对齐元素?

如何在窗口底部对齐元素(与屏幕大小无关),但它保持在那个位置,这样当窗口高度减小时(当用户改变窗口大小时)它仍然在那个确切的位置并且是窗外看不见? 我觉得这可能需要的不仅仅是 CSS。 如果是这样,任何人都可以指导我朝着正确的方向前进吗?
1回复

如何防止底部对齐的DIV元素上的文本重叠

当我尝试在DIV元素中底部对齐文本时,我面临的问题是,当上面的文本足够长到达DIV元素的底部时,它会与底部对齐的文本重叠。 这是代码: http : //jsfiddle.net/Kw758/ 如何防止SPAN元素中的文本与DIV元素中的文本重叠? 我之所以将它与'positio
1回复

底部如何对齐元素以使其可以不受限制地垂直展开?

在我的一个页面上,我有以下结构,我试图将其用作一种工具提示样式行为。 “child”元素将被隐藏,直到单击“container”元素。 我想要做的是将孩子对准实际容器,但我的问题是孩子可以有一个可变高度,所以我不知道如何正确对齐它。 这是我的概念代码: 基本上我想要做的是将#c
1回复

徽标底部的徽标和导航对齐

我正在制作一个网站,该网站的左侧带有徽标和“首页”按钮,右侧是“产品”“关于我们”“联系我们”,首页与徽标的底部对齐,而不是导航顶部。 当我写“ nav a {position:absolute;”时 它会影响所有的nav属性,但可以解决首页和徽标对齐问题。 但是,如果我为“主页”按钮创建
2回复

使元素坚持专利的底部

我想将元素放置在其父底部。 我无法设置其position: absolute和bottom: 0因为我的父div可能会通过缩放或在较小的显示中进行滚动(overview-y)。 如果父元素的其他元素不超过寡妇的身高,我希望该元素被卡在父元素的底部,否则该子元素将是滚动中的最后一个子元素。
5回复

如何将另一个div中的2个div对齐到底部和左侧/右侧

我有这个代码 HTML CSS 我想做的是将div "menu"放在div "head"左下方,将div "search"放在div "head"右下方。 当我使用"menu"和"head"的位置和底部值时,它可以完美地对齐菜单,但是当我尝试使用"sear
2回复

将绝对元素放在容器底部,并带有溢出:自动

我有一个徽标,应该放在固定容器的最底部。 在以下位置上可以正常工作:绝对; 但是,如果我添加overflow-y:自动; 在固定容器中并添加不适合视口高度的内容,我的徽标将粘贴在视口底部,而不是固定容器的底部,从而使内容重叠。 http://jsfiddle.net/1aoah1r
3回复

CSS定位,自动调整大小,顶部和底部对齐

我有一个主DIV容器(橙色)和一些浮动DIV容器(灰色和红色)。 这些内部DIV具有一些内容,并且主DIV必须适合具有更高高度的DIV的高度。 我面临的问题与第一个DIV(灰色的)有关。 根据DIV内部的内容,我必须保持最大高度,所以如果它比任何其他DIV短,它需要调整到最大高度,如果它更