前端面试场景题:两个盒子，左边固定宽，右边自适应，有几种方法?

公共HTML代码部分

<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>

方法一：float来和BFC实现

<style>
.content {
    
    
   border: 1px solid #000;
   height: 800px;
   padding: 20px;
}
.left {
    
    
   width: 200px;
   height: 100%;
   background: red;
   float: left;
}
.right {
    
    
   height: 100%;
   background: pink;
   overflow: hidden;
}
</style>

方法二：absolute定位和margin值实现

<style>
.content {
    
    
    border: 1px solid #000;
    height: 800px;
    padding: 20px;
  }
   .left {
    
    
       width: 200px;
       height: 100%;
       background: red;
       position: absolute;
  }
   .right {
    
    
       height: 100%;
       background: pink;
       margin-left: 200px;
  }
</style>

方法三：calc(100% - 固定内容的宽度) 用calc函数动态计算数值

<style>
.content {
    
    
    border: 1px solid #000;
    height: 800px;
    padding: 20px;
  }
   .left {
    
    
       width: 200px;
       height: 100%;
       background: red;
       float: left;
  }
   .right {
    
    
       height: 100%;
       background: pink;
       float: left;
       width: calc(100% - 200px);
  }
</style>

方法四：flex布局轻松搞定

<style>
   .content {
    
    
       border: 1px solid #000;
       height: 800px;
       padding: 20px;
       display: flex;
  }
   .left {
    
    
       width: 200px;
       height: 100%;
       background: red;
  }
   .right {
    
    
       height: 100%;
       background: pink;
       flex: 1;
  }
</style>

方法五：使用table和table-cell实现

<style>
    .content {
    
    
        border: 1px solid #000;
        width: 100%;
        height: 800px;
        display: table;
    }
    .left {
    
    
        width: 200px;
        height: 100%;
        background: red;
        display: table-cell;
    }
    .right {
    
    
        height: 100%;
        background: pink;
        display: table-cell;
    }
</style>

方法六：使用inline-block携手calc函数设置宽度

<style>
   .content {
    
    
       border: 1px solid #000;
       width: 100%;
       height: 800px;
       font-size: 0;
  }
   .left {
    
    
       width: 200px;
       height: 100%;
       background: red;
       display: inline-block;
       vertical-align: top;
  }
   .right {
    
    
       height: 100%;
       background: pink;
       display: inline-block;
       vertical-align: top;
       width: calc(100% - 200px);
       font-size: 16px;
  }
</style>

陆荣涛前端学习交流Q群858752519
加群备注：CSDN推荐