0

在 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。(网络套件)

4

1 回答 1

2

怎么样:

#container {
  position:relative;
}         

.button { 
  position:absolute;
  bottom:-20px;
  right:-20px;
}         

如果这不起作用,那么使用负的右边距和下边距如何?

于 2012-05-22T12:04:24.020 回答