Geek asks and answers

How to align text at the bottom of the label

I'm having trouble getting the text on the label at the bottom of the label.

I animate the falling text, the label “seems” will fall, as it should, but the text remains on top, it does not follow the label down. Check this jsfiddle, click the button to see the problem. I tried many different ways without coming up with a working solution.

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

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

It doesn't seem to help!

+5
source share
7 answers

You can try

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

jsFiddle

Updated jsFiddle so that the .uppgifterheight method animatematches the height #spelplan.

+2
source 
.uppgifter
{

    padding: 580px 0 1px 230px;
}
0
source

:

$("#the_button").click(function () {
    $(".uppgifter").animate({
        'padding-top':"500px"
    }, 4000, "linear", function() {});
});
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;
    }
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;
    }
0

divs 90- , .

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

#div
{
height:90%;
width:200%
}
0

, . script ( ), -.

. src 100% 0 , css.

<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;
}

, .

0
source

More articles:


All Articles