5

ラベル内のテキストをラベルの下部に配置するのに問題があります。

落下するテキストをアニメーション化しています。ラベルは本来のように落下しているように見えますが、テキストは上に留まり、ラベルを下にたどっていません。このjsfiddleをチェックして、ボタンを押して問題を確認してください。実用的な解決策を思いつくことなく、さまざまな方法を試しました。

http://jsfiddle.net/kaze72/jQ6Ua/

.uppgifter
{
    vertical-align: text-bottom;
}

役に立たないようです！

4

7 に答える 7

2

あなたが試すことができます

.uppgifter
{
    display: table-cell;
    vertical-align: bottom;
    background-color: yellow;
}

jsフィドル

メソッド.uppgifterの の高さが の高さと一致するように jsFiddle を更新しました。animate#spelplan

于 2013-03-04T09:23:17.723 に答える
0 
.uppgifter
{

    padding: 580px 0 1px 230px;
}
于 2013-03-04T09:21:17.877 に答える
0

パディングトップをアニメーション化するだけです：

$("#the_button").click(function () {
    $(".uppgifter").animate({
        'padding-top':"500px"
    }, 4000, "linear", function() {});
});
于 2013-03-04T09:23:50.390 に答える
0

これを試して：

$(document).ready(function() {

    $("#the_button").click(function () {
        $(".uppgifter").animate({ 
            "height":"100px","padding-top":"500px"}, 
            4000, "linear", function() {});
    });
});

または単なる提案、これを見てください:):

$(document).ready(function() {

    $("#the_button").click(function () {
        $(".uppgifter").animate({ 
            "top":"500px"}, 4000, "linear", function() {});
    });
});

と組み合わせ

.uppgifter
    {
        vertical-align: text-bottom;
        position:relative;
        background-color: yellow;
    }
于 2013-03-04T09:23:51.460 に答える
0

高さ 90% の透明な div を 2 つ追加しただけで、ラベルの高さが変化するとテキストが強制的に下に表示されます。

http://jsfiddle.net/jQ6Ua/15/

#div
{
height:90%;
width:200%
}
于 2013-03-04T09:36:52.180 に答える
0 
    * 
    {
        font-family: cursive;
    }

    .panel
    {
        position:relative;
        border: 1px solid;
    }

    #spelplan
    {
        height: 600px;
    }

    .uppgifter
    {
        position:absolute;
        vertical-align: text-bottom;
bottom:0;

        background-color: yellow;
    }
于 2013-03-04T09:25:15.593 に答える
0

コンテナー内のテキストを垂直方向に配置するには、複数の手法を使用できます。ただし、ほとんどの場合、実行時に追加のスクリプト計算が行われ (テキスト コンテナーの高さが変化する場合)、ビジネス ロジックが混乱する可能性があります。

特定の状況でハックを使用できます。css で設定された高さ 100%、幅 0のテキスト コンテナー内に、空の src を持つイメージ コンテナーを追加できます。

<label id="uppgift" class="uppgifter" style="display:inline-block;"><img scr=""/>Abc</label>
<label id="uppgift2" class="uppgifter" style="display:inline-block;"><img scr=""/>123</label>

//and css
.uppgifter img{
    height:100%;
    width:0;
}

例

この方法では、追加のレイヤーのロジックを記述する必要はありません。

于 2013-03-04T09:47:15.320 に答える