实现两栏布局的三种方法

标签

<div class="box">     
  <div class="box_left"></div>    
  <div class="box_right"></div>  
</div>

 

方法一  calc ，注意calc左右要留空格

.box{
      width: 100%;
      height: 100vh;
      background: rgb(88, 144, 196);
   }
.box_left{
      width: 200px;
      height: 100vh;
      background: rgb(186, 201, 103);
      float: left;
    }
.box_right{
      width: calc(100% - 200px);
      height: 100vh;
      background: rgb(126, 233, 158);
      float: left;
    }

 

方法二  overflow

.box{
      width: 100%;
      height: 100vh;
      background: rgb(88, 144, 196);
   }
.box_left{
      width: 200px;
      height: 100vh;
      background: rgb(186, 201, 103);
      float: left;
    }
.box_right{
      overflow: hidden;
      height: 100vh;
      background: rgb(126, 233, 158);
    }

 

方法三  flex

.box{
      width: 100%;
      height: 100vh;
      background: rgb(88, 144, 196);
      display: flex;
    }
    .box_left{
      width: 200px;
      height: 100vh;
      background: rgb(186, 201, 103);
    }
    .box_right{
      flex:1;
      height: 100vh;
      background: rgb(126, 233, 158);
    }

 效果图如下（左边宽度固定，右边自适应）