Question

在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");

我试过底：％但是这显然什么也没做。我试图在视图加载时运行我的小javascript函数但是我尝试实现它 - 我得到height = 0.。

这个问题可能有点复杂，但我想知道的是，是否有任何方法可以在正确的时间运行javascript（在div加载 - 不知何故）或编辑我的CSS更动态？

哦，我在iOS上使用PhoneGap。（Webkit的）

Answer 1

怎么样：

#container {
  position:relative;
}         

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

如果这不起作用，那么如何使用负右边距和下边距呢？

如何定位溢出div的边缘（右下角）的图像？

1 个答案: