html+css两栏布局的三种方法

-redux-

已于 2022-09-08 16:49:02 修改

阅读量3.2k

点赞数 6

分类专栏： HTML 文章标签：前端 html css

于 2022-07-11 18:22:28 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45883508/article/details/125726765

版权

HTML 专栏收录该内容

3 篇文章

订阅专栏

一、

1. 左边div设置float：left 或者position: absolute 脱离文档流

2. 避免左边div遮住右边div，右边div设置margin-left：左边div的宽度

<style>
    .left {
        width: 300px;
        height: 500px;
        background-color: rgb(8, 167, 216);
        float: left;
        /* position: absolute; */
    }
    .right {
        width: calc(100% - 300px);
        height: 500px;
        background-color: rgb(228, 204, 80);
        margin-left: 300px;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

tip：calc可以动态计算宽高

二、

1. 左边div设置float：left 或者position: absolute 脱离文档流

2. 避免左边div遮住右边div，右边div设置overflow: hidden 触发块级格式化上下文（BFC）

<style>
    .left {
        width: 300px;
        height: 500px;
        background-color: rgb(8, 167, 216);
        float: left;
        /* position: absolute; */
    }
    .right {
        width: 300px;
        height: 500px;
        background-color: rgb(228, 204, 80);
        overflow: hidden;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

三、flex布局

1. 给两个div添加父div并设置display: flex

2. 左div设置固定宽

3. 右div设置flex: 1，右div将会自动填充撑满父div的宽

tip：给右div设置宽度将不生效

<style>
    .box {
        display: flex;
    }
    .left {
        width: 300px;
        height: 500px;
        background-color: rgb(8, 167, 216);
    }
    .right {
        flex: 1;
        height: 500px;
        background-color: rgb(228, 204, 80);
    }
</style>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

思想：固定一栏，对另一栏进行操作。本文固定左div，同理也可固定右div( float: right )。