css中用两种方法实现两列布局，左列定宽200px，右列自适应宽

最新推荐文章于 2024-06-25 22:50:37 发布

viceen

最新推荐文章于 2024-06-25 22:50:37 发布

阅读量569

点赞数

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

本文链接：https://blog.csdn.net/weixin_44867717/article/details/128411353

版权

html和css 专栏收录该内容

16 篇文章 3 订阅

订阅专栏

用两种方法实现两列布局，左列定宽200px，右列自适应宽

效果

在这里插入图片描述

实例

<div id="left"></div>
<div id="right"></div>
<style>
    /* 方式一 */
    /* div {
        height: 200px;
    }

    #left {
        float: left;
        width: 200px;
        background: blue;
    }

    #right {
        margin-left: 200px;
        background: red;
    } */
    /* 方式二 */
    body {
        display: flex;
        flex-flow: row;
        height: 200px;
    }

    #left {
        width: 200px;
        background: blue;
    }

    #right {
        flex: 1;
        background: red;
    }
</style>