css后台两栏布局

最新推荐文章于 2023-02-13 12:04:26 发布

weixin_47304385

最新推荐文章于 2023-02-13 12:04:26 发布

阅读量84

点赞数

分类专栏： css页面布局文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_47304385/article/details/125133883

版权

css页面布局专栏收录该内容

13 篇文章 0 订阅

订阅专栏

两栏布局一般常用于后台布局左侧固定宽度右侧自适应宽度
原理：可以给左侧盒子添加浮动，右侧盒子设置overflow:hidden;触发BFC

<style>
        *{
            margin: 0;padding: 0
        }
        .box1{
            width: 200px;
            height: 500px;
            background: pink;
            float: left;
        }
        .box2{
            /* 块级元素不设置宽度的时候默认就是100% */
            /* width: 100%; */
            height: 500px;
            background: green;
            overflow: hidden /*auto*/
        }
    </style>
</head>
<body>
    <div class="box1">左侧盒子</div>
    <div class="box2">右侧盒子</div>
</body>