CSS之左右固定，中间自适应

最新推荐文章于 2025-05-30 11:58:14 发布

原创最新推荐文章于 2025-05-30 11:58:14 发布 · 3.8k 阅读

7 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了CSS布局中一种常见的问题——左右固定，中间自适应的实现。作者通过实践发现了HTML结构顺序对布局的影响，并详细分析了不同实现方法，包括float布局、绝对定位、flex布局以及双飞翼和圣杯布局。重点强调了在使用float布局时，中间元素的顺序至关重要，必须置于最后。

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

左右固定，中间自适应应该是CSS中常见的布局，或者说是CSS中经典的布局，百度查找具体的实现方式，自己敲代码时，发现了一个特别神奇的现象：右边的那个div老被挤下来，如图：

一句一句对比百度到的代码，完全一样呀，为什么会这样？一遍又一遍的查找自己代码的不同之处，奔溃蒙圈……索性把人家的代码复制粘贴，我就不信，还没效果！奇迹出现了，竟然OK了，达到预期效果了！凭什么呀！

既然CSS完全一致，那我比较一下HTML呢？left？有，center？有，right？也有呀！不对，我是完全按照left——center——right即从左到右的顺序写的div，而网上的大多数都是right——left——center……

我的HTML结构：

 <div class="main"> 
                <div class="left">这是左侧的内容 固定宽度</div>
                <div class="center">中间内容，自适应宽度</div>
                <div class="right">这是右侧的内容 固定宽度</div>
               
  </div>

正确的HTML结构：

 <div class="main"> 
                <div class="right">这是右侧的内容 固定宽度</div>
                <div class="left">这是左侧的内容 固定宽度</div>
                <div class="center">中间内容，自适应宽度</div>
 </div>

分析一波：

运用float,左右浮动,中间采用margin-left 和 margin-right 方法。按照HTML在页面展示的顺序，先有left占据了200px，然后是center，center未设置宽度，但其父div是100%,所以，center占据剩余的全部空间（由于设置了margin-right，所以有右边有空白，实际上还是center盒子所占的空间），最后渲染right，由于left和center所在的行空间没有多余的空间了，所以right被挤下来了。

分析二波：

left——right——center或者right——left——center为啥可以达到预期效果？和渲染顺序有关，先渲染left，由于left左边浮动，所以，left乖乖的处于左边；再渲染right，right又浮动，所以，right乖乖的处于右边；最后渲染center，由于left、right设置了浮动（脱离正常文档流），又因为center设置了左右margin（刚好空出的位置放left和right），所以center可以和left、right愉快和谐的处于一行（实际上left、right不在正常的文档流中，刚好处于center的左右margin）

结论：

运用float,左右浮动,中间采用margin-left 和 margin-right 时，一定要注意三个div的顺序，center必须放在最后

-------------------------------------------------------------实现方法----------------------------------------------------------------------------

一、运用float,左右浮动,中间采用margin-left 和 margin-right

代码：

<div class="main"> 
                <div class="right">这是右侧的内容 固定宽度</div>
                <div class="left">这是左侧的内容 固定宽度</div>
                <div class="center">中间内容，自适应宽度</div>

 </div>
-------------------------css--------------------------
<style>
        body{
            margin:0;
            padding:0;
        }
        .main{
            width:100%; 
            margin:0 auto;
         
        }
        .left{
            width:150px; 
            float:left; 
            background:red;
            height: 60px;
        }
        .center{
            margin-left:150px;
            margin-right:200px;
          background-color:pink;
         height: 60px;
        }
        .right{
            width:200px;
             float:right; 
             background-color:blue;
             height: 60px;
        }
    </style>

注意：

三个div的顺序：center必须是最后一个，即HTML的文档结构可以是left——right——center也可以是right——left——center，但绝对不能是left——center——right

二、左右两侧采用绝对定位中间同样采用margin-left margin-right方法

代码：

 <div class="main"> 
                <div class="left">这是左侧的内容 固定宽度</div>
                <div class="center">中间内容，自适应宽度</div>
                <div class="right">这是右侧的内容 固定宽度</div>
</div>
 
------------------------------css-------------------------------------
 <style>
        body{
            margin:0;
            padding:0;
        }
        .main{
            width:100%; 
            margin:0 auto;
         
        }
        .left ,.right{
            position: absolute;
            top:0;
            width: 180px;
            height: 100%;
        }
        .left{
           left: 0;
            background:red;
           
        }
        .center{
            margin-left:180px;
            margin-right:180px;
           
        }
        .right{
             right:0;
             background-color:blue;
            
        }
    </style>

简要分析：

left、right采用绝对定位（left固定在左边，right固定在右边），所以left、right乖乖待在左右两边；center设置了左右margin（如果不设置会覆盖left，right），margin的位置刚好放left和right。

注意：

与第一种实现方式的区别是：不需要考虑div的顺序

三、flex布局

代码：

 <div class="main"> 
                <div class="right">这是右侧的内容 固定宽度</div>
                <div class="center">中间内容，自适应宽度</div>
                <div class="left">这是左侧的内容 固定宽度</div>      
             </div>
--------------------------------CSS----------------------------
 .main{
            display: flex;
            width:100%; 
            margin:0 auto;
         
        }
        .left{
            width:150px; 
            height: 60px;
            background:red;
        }
        .center{
            flex: 1;
            background-color:pink;
             height: 60px;
        }
        .right{
            width:200px;
            height: 60px;
            background-color:blue;
            
        }

简要分析：

左右宽度设置固定，中间div通过设置flex：1让其占满剩余空间，达到左右固定，中间自适应的效果

注意：

这里不涉及到脱离文档流，所以三个div顺序必须按照展示的顺序来写，即left——center——right（第一种实现方式的阴影太深了，时不时的要想到顺序顺序顺序，简直中毒太深了）

四、使用负margin——双飞翼布局

五、使用负margin——圣杯布局

注：

最后两个布局，目前感觉理解的还不到位，等完全理解了，再继续完善吧。