css让盒子跟随浏览器的大小而自适应

y叽里咕噜

已于 2022-11-17 10:27:26 修改

阅读量3.8k

点赞数

文章标签： css css3 html

于 2022-11-17 10:27:18 首次发布

本文链接：https://blog.csdn.net/qq_54030660/article/details/127899010

版权

方法就是flex布局和设置宽度百分比

比如下面效果的实现

代码，根据自己需要进行修改即可

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .boxs {
        display: flex;
    }

    .one {
        display: flex;
        width: 20%;
        height: 30px; 
        background-color: aqua;
    }

    .two {
        width: 60%;
        height: 30px;
        background-color: rgb(0, 255, 102);
    }


    .three {
        width: 20%;
        height: 30px;
        background-color: rgb(236, 185, 19);
    }
    .one1,.one3{
        width: 30%;
        background-color: brown;
        margin-left: 3%;
    }
    .one2{
        width: 30%;
        background-color: blueviolet;
    }
</style>

<body>
    <div class="boxs">
        <div class="one">
            <div class="one1">

            </div>
            <div class="one2"></div>
            <div class="one3"></div>
        </div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>