使用css3的flex盒模型来实现两栏布局（左侧固定宽度，右侧自适应宽度）

曾经终败给现在 2021-07-27 01:37 402阅读 0赞

<!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8">  
    <style>  
    .parent{
      height:500px;  
      border:1px solid #222;  
      display:flex;/*设为伸缩容器*/  
      flex-flow:row;/*伸缩项目单行排列*/  
    }  
    .stable{  
      width:200px;/*固定宽度*/  
      border:1px solid  #ccc;  
      margin:20px;  
    }  
    .change{  
      flex:1;/*这里设置为占比1，填充满剩余空间*/  
      border:1px solid #ff4400;  
      margin:20px;  
    }  
    </style>  
    </head>  
    <body>  
      <div class="parent">  
        <div class="stable">stable 固定宽度200px</div>  
        <div class="change">changeable 可变宽度</div>  
      </div>  
    </body>  
    </html>

附：传统模式（利用float浮动实现）

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .parent{
        height: 500px;
        border:1px solid #222;  
      }
      .stable{
        float: left;
        height: 460px;
        width: 200px;
        border:1px solid  #ccc;  
        margin:20px;  
      }
      .change{
        height: 460px;
        border:1px solid #ff4400;  
        margin:20px 20px 20px 260px;  
      }
    </style>
    </head>
    <body>
      <div class="parent">
        <div class="stable">stable 固定宽度200px</div>
        <div class="change">changeable 可变宽度</div>
      </div>
    </body>
    </html>