CSS让元素置于容器底部

回顾

之前 回顾 已经描述了如何让 CSS在不影响总体布局情况下让元素自由缩小
效果如图所示
在这里插入图片描述
此时代码如下

<body>
    <div class="box1">box1box1</div>
    <div class="box_0"> 
        <!--class = "box_0的外层盒子"-->
        <div class="box2">box2box2</div>
    </div>
    <div class="box3">box3box3</div>
    <div class="box4">box4box4</div>
    <div class="box5">box5box5</div>
</body>
<style>
    .box1{
        height: 100px;
        background-color: red;
    }
    .box_0{
        height: 100px;
    }
    .box2{
        height: 50px;
        background-color: blue;
    }
    .box3{
        height: 100px;
        background-color: green;
    }
    .box4{
        height: 100px;
        background-color: gray;
    }
    .box5{
        height: 100px;
        background-color: rgb(233, 30, 206);
    }
</style>
改进

这时box2包含于容器box_0中，若想让box2置于box_0底部而不是顶部实现下图所示效果
在这里插入图片描述
可以把box_0(父元素)的定位设定为相对定位，而box2的定位设定为绝对定位，且其bottom设定为0，即

    .box_0{
        position: relative;
        height: 100px;
    }
    .box2{
        position: absolute;
        height: 50px;
        background-color: blue;
        bottom: 0;
    }

此时已经成功了一半，但是box2设定为绝对定位后，默认就不是100%的宽度了，而是内容多宽就多宽，此时效果如下
在这里插入图片描述

进一步改进

此时可以获取box_0的宽度，然后为box2设定同样的宽度，首先为box_0设置一个id = “box_width”，然后用document.getElementById(“box_width”).offsetWidth获取其宽度

	<div class="box_0" id="box_width"> 
		<!--class = "box_0的外层盒子"-->
        <div class="box2">box2box2</div>
    </div>
    <script>
        window.onload = function(){
            w = document.getElementById("box_width").offsetWidth
        alert(w);
    }
    </script>

可以得到
在这里插入图片描述
此时，为box2设定宽度

    .box2{
        position: absolute;
        height: 50px;
        width: 1520px;
        background-color: blue;
        bottom: 0;
    }

最后效果为
在这里插入图片描述
最终代码预览

<body>
    <div class="box1">box1box1</div>
    <div class="box_0" id="box_width"> 
		<!--class = "box_0的外层盒子"-->
        <div class="box2">box2box2</div>
    </div>
    <script>
        window.onload = function(){
            w = document.getElementById("box_width").offsetWidth
        alert(w);
    }
    </script>
    <div class="box3">box3box3</div>
    <div class="box4">box4box4</div>
    <div class="box5">box5box5</div>
</body>
<style>
    .box1{
        height: 100px;
        background-color: red;
    }
    .box_0{
        position: relative;
        height: 100px;
    }
    .box2{
        position: absolute;
        height: 50px;
        width: 1520px;
        background-color: blue;
        bottom: 0;
    }
    .box3{
        height: 100px;
        background-color: green;
    }
    .box4{
        height: 100px;
        background-color: gray;
    }
    .box5{
        height: 100px;
        background-color: rgb(233, 30, 206);
    }
</style>
# css3 # html5 # css # html
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生