双栏布局，自适应双列布局，CSS左侧固定，右侧自适应布局的方法、BFC是什么

前端-JC

已于 2022-07-19 11:04:32 修改

阅读量264

点赞数 1

分类专栏： css 文章标签： javascript 前端 css html 开发语言

于 2022-07-10 10:56:04 首次发布

本文链接：https://blog.csdn.net/qq_57334853/article/details/125697319

版权

本文介绍了在前端开发中如何创建双栏布局，其中左侧内容固定，右侧根据屏幕大小自适应。文章详细讲解了七种不同的实现方法，包括浮动布局结合BFC、margin、padding、calc、弹性布局和网格布局。同时，解释了BFC（Block Formatting Context）的概念，包括其触发条件和用途，如清除浮动、解决margin重叠和自适应双列布局问题。

摘要由CSDN通过智能技术生成

左侧内容固定，右侧自动适应屏幕布局是开发中常见的布局，一般常见于后台管理系统等：左侧展示tab栏，右侧展示管理的内容。

以下是七种方法：

左侧浮动 + 右侧BFC
左侧浮动 + 右侧margin
左侧固定 + 右侧margin
左侧固定 + 父级padding
先两个在一行 + 右侧calc
弹性布局
网格布局

初始样式+DOM解构:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>初始样式+DOM解构</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            height: 80vh;
        }

        .left {
            width: 200px;
            height: 80vh;
            background-color: cyan;
        }

        .right {
            height: 200px;
            background-color: palevioletred;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

初始化效果：

布局后效果：

最低0.47元/天解锁文章

前端-JC

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
双栏布局，自适应双列布局，CSS左侧固定，右侧自适应布局的方法、BFC是什么

双栏布局，自适应双列布局，CSS左侧固定，右侧自适应布局的方法左侧内容固定，右侧自动适应屏幕布局是开发中常见的布局，一般常见于后台管理系统等：左侧展示tab栏，右侧展示管理的内容。以下是七种方法：左侧浮动 + 右侧BFC左侧浮动 + 右侧margin左侧固定 + 右侧margin左侧固定 + 父级padding先两个在一行 + 右侧calc弹性布局网格布局BFC是什么，BFC触发的条件，BFC的使用？首先说说BFC（Block Formatting Context）是什么？......
复制链接

扫一扫