用CSS实现：左右两栏宽度固定，中间一栏的宽度随浏览器宽度的改变而改变_实现两栏布局,左边一栏宽度固定200.右边一栏宽度100,中间一栏宽度自适应-优快云博客

本文介绍了四种使用CSS来实现页面布局的方法，使得左右两栏宽度固定，中间栏的宽度能根据浏览器窗口大小变化而自动调整。方法包括使用calc()函数进行动态计算，利用position:absolute定位，运用display:flex弹性布局，以及采用display:table表格布局方式。

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

方法一，使用calc()


<div class="zuo">左边 </div>
<div class="zhong">中间</div>
<div class="you">右边</div>


.zuo, .you{
            width:200px;
            height:100%;
            background-color: red;
            float:left;
        }
        .zhong{
            float:left;
            width:calc(100% - 400px)
        }

该方法使用了CSS3提供的方法calc()。 calc()可以用来动态的得到一些值支持+-*/运算。运算符号前后需要 “ ”

方法二，使用position:absolute

   
<div class="zuo">左边 </div>
<div class="zhong">中间</div>
<div class="you">右边</div>


     .zuo,.you{
            width: 200px;
            height:100%;
            background-color: red;
            position:absolute;
        }
      .zuo{
          left:0;
      }
      .you{
         right: 0;
      }
        .zhong{
            position: absolute;
            left:200px;
            right:200px;
            background-color: yellow;
        }

方法三，使用display:flex

<div class="kuang2">
  <div class="left2"></div>
  <div class="middle2"></div>
  <div class="right2"></div>
</div>



    .kuang2 {
      display: flex;
      width: 100%;
    }

    .left2,  .right2 {
      width: 200px;
      height: 200px;
      background-color: gold;

    }

    .middle2 {
      height: 200px;
      background-color: green;
      flex: 1
    }

方法四，使用display:table

  <div class="kuang4">
    <div class="left4"></div>
    <div class="middle4"></div>
    <div class="right4"></div>
  </div>


   .kuang4{
      display: table;
      width: 100%;
    }
    .kuang4 div{
      height: 200px;
      display: table-cell;
    }
    .right4 ,  .left4{

      width:200px;
      background-color: red;
    }
    .middle4{
      background-color: green;
    }