0

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 を使用しています。(Webキット)

4

1 に答える 1

2

どうですか：

#container {
  position:relative;
}         

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

それがうまくいかない場合は、代わりに負の右マージンと下マージンを使用してみませんか？

于 2012-05-22T12:04:24.020 に答える