如何让子盒子在大盒子中沉底显示？

最新推荐文章于 2024-02-01 10:31:47 发布

woshishazia__

最新推荐文章于 2024-02-01 10:31:47 发布

阅读量991

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/woshishazia__/article/details/125495501

版权

如何让子盒子在大盒子中沉底

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/game.css">
</head>
<body>
    <!-- 游戏盒子 -->
    <div id="gameBox">
        <!-- 大地盒子 -->
        <div id="land">
        </div>
    </div>
</body>
</html>

【方法1】绝对定位

#gameBox {
    width: 480px;
    height: 640px;
    border: 1px solid #000;
    background-image: url(../images/background.png);
    /* 子绝父相 */
    position: relative;
}

/* 大地盒子 */
#land {
    width: 480px;
    height: 80px;
    background-color: red;
    /* 一个绝对定位元素的定位参考点是祖先元素中距离自己最近的已经定位的元素 */
    position: absolute;
    bottom: 0;
    left: 0;
}

【方法2】 flex布局

/* 设置父元素弹性盒子 */
display: flex;
/* 轴朝向调成纵轴逆向 */
flex-direction: column-reverse;

#gameBox {
    width: 480px;
    height: 640px;
    border: 1px solid #000;
    background-image: url(../images/background.png);
    /* 弹性盒子 */
    display: flex;
    /* 轴朝向调成纵轴逆向 */
    flex-direction: column-reverse;

}

/* 大地盒子 */
#land {
    width: 480px;
    height: 80px;
    background-color: red;
}

 <!-- 游戏盒子 -->
    <div id="gameBox">
        <!-- 大地盒子 -->
        <div id="land">
        </div>
        <div style="width:100%;height:80px;background: pink;">第二个</div>
        <div style="width:100%;height:80px;background: rgb(191, 54, 77);">第三个</div>
        <div style="width:100%;height:80px;background: rgb(13, 147, 78);">第四个</div>
        <div style="width:100%;height:80px;background: rgb(140, 19, 162);">第五个</div>
        <div style="width:100%;height:80px;background: rgb(122, 142, 85);">第六个</div>
    
    </div>

在这里插入图片描述

【方法3】 margin-top:auto;

父盒子 display:flex;
子盒子 margin-top:auto;

#gameBox {
    width: 480px;
    height: 640px;
    border: 1px solid #000;
    background-image: url(../images/background.png);
    /* 弹性盒子 */
    display: flex;

}

/* 大地盒子 */
#land {
    width: 480px;
    height: 80px;
    background-color: red;
    margin-top: auto;
}

【方法3】 verticle-align:center;

父盒子
display: table-cell;
vertical-align: bottom;

#gameBox {
    width: 480px;
    height: 640px;
    border: 1px solid #000;
    background-image: url(../images/background.png);
    display: table-cell;
    vertical-align: bottom;

}

/* 大地盒子 */
#land {
    width: 480px;
    height: 80px;
    background-color: red;
}