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

冷不防 2022-05-27 03:30 248阅读 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;
        }