两列布局——左侧宽度固定，右侧宽度自适应的实现方法

关注

原创最新推荐文章于 2026-02-14 00:15:14 发布 960 阅读 AI 写同款· GEO 优化 ›

Dify 深度进阶：从入门到精通AI应用构建《Dify进阶指南：从基础到高阶的AI应用开发技巧》本文深入探讨Dify平台的高级功能与应用开发技巧。首先强调核心概念的深化，包括提示词工程进阶、知识库高效管理和模型参数优化。重点介绍智能体应用的开发方法，如何让AI具备自主规划与执行能力。同时讲解工作流编排、前端集成等实用技术，并分享应用运营优化、成本控制等实践经验。文章还展望了Dify生态的发展趋势，为开发者提供从基础到进阶的完整学习路径，助力打造更智能高效的AI应用。阅读详情

左侧宽度固定，右侧宽度自适应的实现方法

方法一：左浮动+margin-left

让两个元素在同一行显示首先想到的就是浮动，首先可以让左侧元素浮动,使其脱离文档流,右边的元素加上margin-left,其值等于左边元素的宽度，这时右侧元素紧挨左侧元素，实现左侧宽度固定，右侧宽度自适应效果。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            width: 300px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .right {
            height: 200px;
            background-color: skyblue;
            margin-left: 300px;
        }
    </style>
</head>
<body>
        <div class="left">左边固定</div>
        <div class="right">右边自适应</div>
</body>
</html>

实现效果:

方法三:两个float方案

单个元素浮动可以实现，让两个容器同时浮动当然也可以实现，但是右边元素在浮动的时候宽度是依据内容决定的，因此我们需要为右边的元素设置一个宽度，可以用calc函数进行解决。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            width: 300px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .right {
            height: 200px;
            background-color: skyblue;
            float: left;
            width: calc(100% - 300px);
        }
    </style>
</head>
<body>
    <div class="container">
            <div class="left">左边固定</div>
            <div class="right">右边自适应</div>
    </div>
        
</body>
</html>

效果如下:

方法三:absolute+margin-left

此方法相同于方法一,都是让左边的盒子脱离标准流,右边盒子添加margin-left(其值等于左边盒子的宽度)。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            width: 300px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }

        .right {
            height: 200px;
            background-color: skyblue;
            margin-left: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
            <div class="left">左边固定</div>
            <div class="right">右边自适应</div>
    </div>
        
</body>
</html>

效果如下：