How can I position my div at the bottom of its container?

前端 未结 24 2432
广开言路
广开言路 2020-11-22 00:46

Given the following HTML:



        
24条回答
  •  执念已碎
    2020-11-22 01:28

    You can indeed align the box to the bottom without using position:absolute if you know the height of the #container using the text alignment feature of inline-block elements.

    Here you can see it in action.

    This is the code:

    #container {
        /* So the #container most have a fixed height */
        height: 300px;
        line-height: 300px;
        background:Red;
    }
    
    #container > * {
        /* Restore Line height to Normal */
        line-height: 1.2em;
    }
    
    #copyright {
        display:inline-block;
        vertical-align:bottom;
        width:100%; /* Let it be a block */
        background:green;
    }
    

提交回复
热议问题