用CSS实现：左右两栏宽度固定，中间一栏的宽度随浏览器宽度的改变而改变-蒲公英云

用CSS实现：左右两栏宽度固定，中间一栏的宽度随浏览器宽度的改变而改变

冷不防 2022-05-27 03:30 303阅读 0赞

方法一，使用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;
    }