Question

这是我的第一个问题，所以我希望它符合标准。我正在尝试将我的孩子div移到父div的底部。我读到，必须将父div的定位设置为relative，并且必须将子div的定位设置为absolute。然后，bottom必须设置为0才能让孩子div向下移动。

<html>
    <style type="text/css">
    .card {
        position:relative;
    /* Don’t change these */
        float: left;
        box-sizing: border-box;
        /* Feel free to play around with these */
        text-align: center;
        border-style: double;
        border-width: 3px;
        background: #84a0d7;
        line-height: 100px;
        height: 100px;
        /* Change the width to get a different layout */
        width: 33.33%;

    }

    .comment {
        font-size:9pt;
        color:white;
        font-family:Verdana;
        line-height:normal;
        position:absolute;

        /* Here, I set top to 0. If I change that line to bottom:0;
           the Div moves up instead of down. Could someone help me 
           figure out why that happens?                               */

        top:0;
        text-align:left;
        width: 100%;
        height:100px;    
    }

    @media (max-width:800px) {
        .card {
            width:50%;
        }

}

    @media (max-width:400px) {
        .card {
            width:100%;
        }
}

    </style>
    <head>
        <meta charset="UTF-8">
    </head>
    <body style="margin:0px">
        <h1>Best Football Players</h1>
        <div class="card">
            Messi
            <div class="comment">Undoubtedly the best in the world and most likely of all times (Sorry, Ronaldo fans)</div>
        </div>
    </body>
</html>

Answer 1

现在您将comment设置为与card相同的高度，因此将top或bottom设置为0并不重要。

像这样更改.comment，它会在底部对齐。

bottom:0;
height: auto;

示例代码段

    .card {
        position: relative;
    /* Don’t change these */
        float: left;
        box-sizing: border-box;
        /* Feel free to play around with these */
        text-align: center;
        border-style: double;
        border-width: 3px;
        background: #84a0d7;
        line-height: 100px;
        height: 100px;
        /* Change the width to get a different layout */
        width: 33.33%;

    }

    .comment {
        font-size:9pt;
        color:white;
        font-family:Verdana;
        line-height:normal;
        position:absolute;
        bottom:0;
        text-align:left;
        width: 100%;
        height: auto;    
    }

    @media (max-width:800px) {
        .card {
            width:50%;
        }

}

    @media (max-width:400px) {
        .card {
            width:100%;
        }
}

        <h1>Best Football Players</h1>
        <div class="card">
            Messi
            <div class="comment">Undoubtedly the best in the world and most likely of all times (Sorry, Ronaldo fans)</div>
        </div>

CSS - 父Div中的Child Div（绝对值）（相对）不会移动到底部

1 个答案: