前端面试题：场景题(两个盒子，左边固定宽，右边自适应，你能想到几种方法)

　　· 公共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>

　　更多关于前端培训的问题，欢迎咨询千锋教育在线名师，如果想要了解我们的师资、课程、项目实操的话可以点击咨询课程顾问，获取试听资格来试听我们的课程，在线零距离接触千锋教育大咖名师，让你轻松从入门到精通。