在 div 填充了未定义数量的文本之后,有什么方法可以将图像定位在 div 的底部(溢出 div 边缘)?
图像应该位于 div 内部的一半和 div 外部的一半 - 溢出边缘(如果你知道我的意思) - 我已经设法通过使用相对位置和静态布局(以像素为单位)来做到这一点)。但是,当 div 高度是动态的 (height=auto;) 时,这不起作用。
我有一个这样的html结构:
<div class="container">
<div class="box">
<p>X amount of text</p>
</div>
<img class="button" src="../images/image.png"></img>
</div>
我的 CSS:
.button
{
position:relative;
right: 30px;
#bottom:-103px;
#bottom: 70%;
z-index:1;
}
此外,当单击图像时,框会展开。这是通过以下代码完成的(并且可以完美运行):
var boxHeight = $('.box').height();
var boxHeightOffset = 5 - boxHeight;
$('.button').css('bottom', boxHeightOffset + "px");
我尝试过使用 bottom: % 但这显然什么也没做。我试图在视图加载时运行我的小 javascript 函数,但是我尝试实现它 - 我得到高度 = 0。
这个问题可能有点复杂,但我想知道是否有任何方法可以在正确的时间运行 javascript(在 div 加载时 - 不知何故)或编辑我的 css 使其更具动态性?
哦,我在 iOS 上使用 PhoneGap。(网络套件)