实现一个两栏布局，左栏宽度固定，右栏自适应

最新推荐文章于 2022-07-02 17:10:57 发布

swallowblank

最新推荐文章于 2022-07-02 17:10:57 发布

阅读量416

点赞数

分类专栏： css及css奇技淫巧前端

本文链接：https://blog.csdn.net/swallowblank/article/details/115378840

版权

前端同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

css及css奇技淫巧

15 篇文章 3 订阅

订阅专栏

方法1：左侧使用float，右侧margin-left

原理：因为float就脱离文档流了，右侧会挤到左侧的位置上，所以需要margin-left，margin-left要等于float的宽度。

<style>
* {
    box-sizing: border-box;
}
html, body {
    margin: 0;
    height: 100%;
}
div {
    height: 100%;
}
.aside {
    width: 300px;
    float: left;
    background: lightyellow;
}
.main {
    background: lightseagreen;
    margin-left: 300px;
}
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

方法2：左侧使用float，右侧BFC

原理：> BFC区域不会与float box重叠

<style>
    div {
        height: 500px;
    }
    .aside {
        width: 300px;
        float: left;
        background: lightyellow;
    }
    .main {
        overflow: hidden;
        background: lightblue;
    }
</style>

<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

方法3：Flex布局

<style>
    html,
    body {
        height: 100%;
        margin: 0;
    }
    div {
        height: 100%;
    }
    .container {
        display: flex;
    }
    .left {
        flex: 0 0 200px;
        background: lightgreen;
    }
    .right {
        background: lightblue;
        flex: 1 0 auto;
    }
</style>

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