CSS 实现左侧固定，右侧自适应两栏布局

最新推荐文章于 2025-03-02 09:05:31 发布

丸子嘻嘻

最新推荐文章于 2025-03-02 09:05:31 发布

阅读量952

点赞数

本文链接：https://blog.youkuaiyun.com/TWFKXP/article/details/80580745

版权

本文介绍了三种CSS布局技巧，包括浮动元素加margin-left、绝对定位元素加margin-left以及双浮动结合calc方法，实现左侧栏固定宽度，右侧栏自适应宽度的页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
    .outer {
        overflow: hidden;
        height:150px;      
        border: 1px solid red; 
    }

    .fix {
        width: 200px;
        height: 150px;
        background: #BCE8F1;  

    }

    .free {
        height: 100px;
        background: #F0AD4E;
    }
</style>
   <div class="outer">
        <div class="fix">常用的宽度自适应的方法通常是利用了block水平的元素宽度能随父容器调节的流动特性。另外一种思路是利用CSS中的calc()方法来动态设定宽度。还有一种思路是，利用CSS3中的新型布局flex layout与grid layout。
            </div>
        <div class="free">自适应区(content)</div>
    </div>

【1】浮动元素+margin-left

 .fix {
        float: left;
        width: 200px;
        height: 150px;
        background: #BCE8F1;  

    }

    .free {
        margin-left: 220px;
        height: 100px;
        background: #F0AD4E;
    }

【2】绝对定位元素+margin-left

    .outer {
        height:150px;
        border: 1px solid red;
        position: relative;

    }
 .fix {
        position: absolute;
        width: 200px;
        height: 150px;
        background: #BCE8F1;  

    }
    .free {  
        margin-left: 220px;
        height: 100px;
        background: #F0AD4E;
    }

【3】双浮动+ cacl

 .outer {
        height:150px;
        border: 1px solid red;
        overflow: hidden;    
    }

    .fix {
        float: left;
        width: 200px;
        height: 150px;
        background: #BCE8F1;  

    }

    .free {
        float: left;
        width:cacl(100% - 200px);
        height: 100px;
        background: #F0AD4E;
    }